テーマtwentytwelveでサイトを構築する

paper

当サイトの現状(2018年2月現在)のデザインを設定するまでに行った作業項目を記録しておく。

前提は、

  • エックスサーバーを使用をする
  • WordPressを使用する
  • インストールディレクトリは/yusuzume.com/wp/
  • 利用する情報はXサーバーの管理画面
  • WordPressの始め方や使い方まとめ (以下、マニュアル)に従う

スポンサーリンク

ワードプレスのインストール

  • 独自ドメインyusuzume.comを設定する
  • MySQLデータベースを設定する
  • WordPressを自動インストールする
  • 無料の独自SSLを導入する

これらはマニュアル通り作業する。
実際には、独自ssl以外は既に設定済みだったので作業はスルーした。

WordPressの初期設定

  • ユーザー設定とプラグインでセキュリティー対策
  • WordPressの一般設定
  • パーマリンクの設定:マニュアル通り、記事名を設定する
  • WordPressのメディア設定:マニュアル通り、サムネイルは100pxX100pxにする
  • WordPressのディスカッション設定
  • バックアップ方法:UpdraftPlusを使用し、保存先はGoogleドライブを使用する

WordPressの記事投稿の方法

  • ナビゲーションメニューの設定

WordPressのカスタマイズの前にやっておくこと

  • エックスサーバーで子テーマを作成する

プラグインのインストールと設定

  • Akismet:APIキーの入手、設定のところがよくわからなかったが、できた
  • PubSubHubbub:
  • Multibyte Patch
  • Category Order & Taxonomy Terms Order
  • Social Bookmarking Light
  • Add Quick Tag
  • :h2、h3、h4タグを設定

  • EWWW Image Optimizer

子テーマにファイルを設置

親テーマから必要なファイルをコピーしてくる。
content.php
comment.php
single.php
tag.php
footer.php
header.php
index.php
category.php

FFTPソフトを使って、いったんパソコンのローカル環境に親テーマから各ファイルをダウンロードする。
ふたたびFFTPソフトを使って、各ファイルを子テーマにアップロードする。
このやり方が私にはやりやすかった。

TwentyTwelveカスタマイズ

  • WordPressカテゴリーの未分類を削除する
  • ワードプレスでフォントや文字大きさ、行間をカスタマイズ
  • タイトル全般のカスタマイズ
  • 見出しのカスタマイズ:h2,h3,h4の見出しを設定した
  • 記事内やサイドバーのリンクをカスタマイズ
  • ナビゲーションメニューのカスタマイズ
  • 背景色を変更するカスタマイズ:試しに画像を入れてみた
  • コメントをどうぞ:削除した
  • ヘッダー画像設定と位置設定:画像を入れてみた。キャッチ画像と並んでくどいかな?
  • 横幅やサイドバーの幅を変更する:変更した
  • パンくずリストを設置する:設置した
  • コメント欄のカスタマイズ:カスタマイズした
  • メタ情報「カテゴリー」や「投稿日」をカスタマイズ:削除した
  • ファビコンを設置:画像を適当に作成して設置した
  • アイキャッチ画像のサイズと位置のカスタマイズ:
  • トップページやカテゴリーページを抜粋記事一覧にする
  • 「続きを読む」を設置する
  • アイキャッチ画像サイズをページごとに変える
  • フッターの「Proudly powered by WordPress」をCopyrightに変える
  • カテゴリー別アーカイブの表示をカスタマイズ
  • サイドバーに自作の人気記事一覧を表示する:アイキャッチ画像付きで設置した
  • 目次(記事一覧ページ)を作る:未実施
  • カテゴリーの最新記事だけを全文表示させる
  • たくさんありました。大変でした。

    WordPress高速化

    画像を一括で圧縮できるプラグイン「EWWW Image Optimizer」で高速化:設置した

    作業しての感想

    とにかく大変な作業量がある。
    これだけを作業するためのノウハウ、間違いなく作業するための根気と、作業を間違えた時の修正力が必要。
    デザインができてくるにつれて、サイトに愛着がわいてくる気がする。
    記事をこれからも書いていこうという意欲もわいてくる。

    twentytwelveのカスタマイズ項目に残りがあるが、必要に応じて作業していくことにする。
    高速化については、まだよくわからない(対応すべきかどうか)ので、ペンディングとする。

    目次とか、プライバシーポリシーのページは必要そうなので、これから固定ページで作っていこう。
    プロフィールページはどうしようかな?

    フッターメニューの追加

    目次の作成

    目次をList Category Postsプラグインを使って固定ページで作成。

    catlist name=””のショートコード?

    を使えば簡単に目次が作れてとても便利。

    ほかの固定ページを作成

    プロフィールページはすでに作ってあったが内容を追加。
    プライバシーポリシーと、運営者情報は、英語のサイトからコピーして修正。

    フッターメニューの作成

    WordPress管理画面の「外観」「メニュー」で新しくフッターメニューを追加。

    フッターメニューの追加

    TwentyTwelveには用意されてないので、以下の追加をする。
    この部分は、別の情報を利用した。
    functions.phpに

    register_nav_menu( ‘footer-menu’, ‘フッターメニュー’ );

    footer.phpに

    ‘footer-menu’)); ?>

    styles.cssに

    .site-info ul {
    text-align: center;
    }
    .site-info li {
    display: inline-block;
    margin-right: 18px;
    }

    それぞれを追加する。

    関連記事を表示させる

    プラグインを使わない方法
    サムネイル表示(画像あり)
    テーマフォルダに「related.php」を作成し内容を記載する。

    sinle.phpの作成
    「related.php」を呼び出す記述を追加する。

    style.cssに記述を追加
    (関連記事の表示部分)

    style.cssを見やすくする

    後でどこの部分が何の記述かがわかるようにしておく。
    /* start */
    /* end */
    で内容を記載し囲んでおく

    以上でいったん作業は終了。


    スポンサーリンク

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です