WordPressサイトのカスタマイズ(Twenty Seventeen)

WordPressの基本設定とWordPressの公式テーマ「Twenty Seventeen」のカスタマイズで、サイトのデザインを整えます。「Twenty Seventeen」は、デフォルトでかなり見栄えがよく、なるべくカスタマイズをしないで使用することを目標にします。

WordPressの初期設定

WordPressの初期設定を行います。投稿ページを作成する前に、まずはパーマリンクの設定を行います。合わせて、その他の基本設定を行います。

パーマリンクの設定

パーマリンク設定は、サイトのページのURLを決める設定になります。リンクを貼るにしても、検索サイトからのアクセスを期待するにしても重要な設定です。本サイトでは、URLが以下の形式になる「数字ベース」の設定を使用しています。

https://lab4ict.com/system/archives/123

「数字ベース」の場合、URLから何の記事であるかはわかりませんが、記事のタイトルやカテゴリを自由に変更できるところが強みです。

一般の設定

本サイトでは、以下の設定を変更しています。このあたりは、好みで変更しましょう。

設定項目 設定値
日付 YYYY-MM-DD
時刻 HH:MM

ディスカッションの設定

本サイトでは、主にコメントスパム対応として、以下の設定にしています。個別の記事毎に設定が可能で、個別の記事の設定のほうが優先されます。

設定項目 設定値
この投稿に含まれるすべてのリンクへの通知を試みる オフ
新しい記事に対し他のブログからの通知を受け付ける オフ
新しい投稿へのコメントを許可する オフ

Twenty Seventeenの子テーマの作成

Twenty Seventeenの子テーマを作成して、サイトのテーマに設定します。脆弱性などによって、テーマがバージョンアップした場合の影響を最小限に留めることができます。

子テーマの作成

子テーマを作成します。まず、小テーマのディレクトリを作成します。

$ cd /var/www/html/system/wp-content/themes
$ sudo mkdir ./twentyseventeen-child
$ cd ./twentyseventeen-child

スタイルシートを作成します。

$ sudo vi ./style.css
/*
 Theme Name:   Twenty Seventeen Child
 Template:     twentyseventeen
*/

function.phpを作成します。

$ sudo vi ./functions.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

子テーマのディレクトリの所有者を変更します。

$ cd ../
$ sudo chown -R apache:apache ./twentyseventeen-child
$ ls -alR

WordPressのメニューから、「外観」→「テーマ」を選び、「Twenty Seventeen Child」選択して、有効化します。

トップページ用の固定ページの作成

サイトのカスタマイズを始める前に、トップページ用の固定ページを作成します。本サイトでは、以下のページを作成しました。

  • 本サイトについて
  • 本サイトの構成について
  • 本サイトのプライバシーポリシーについて
  • サイト用の画像の作成

    サイトのカスタマイズで使用する、以下の画像を作成します。

    画像 推奨サイズ
    ヘッダ画像 2000 x 1200 pixel
    サイトロゴ 250 x 250 pixel

    サイトアイコン 512 x 512 pixel

    カテゴリの作成

    本サイトでは、以下のカテゴリを作成しました。このカテゴリをベースにして記事を作成していくことになります。

    • システム設計
    • システム構築
    • システム活用
    • システム開発

    サイトのカスタマイズ

    WordPressのメニューから、「外観」→「カスタマイズ」を選び、サイトのカスタマイズを行います。

    サイト基本情報

    サイトの基本情報を設定します。

    サイトのロゴ

    サイトロゴ用に作成た画像を設定します。

    サイトのタイトル

    サイトのタイトルを設定します。本サイトでは、「Laboratory for Personal ICT」を設定しています。

    サイトのキャッチフレーズ

    サイトのキャッチフレーズを設定します。本サイトでは、「This website focuses on ICT for personal use.」を設定しています。

    サイトアイコン

    サイトアイコン用に作成た画像を設定します。ファビコンなどに使用されます。

    全体の配色と、ヘッダテキスト色を選択します。

    配色

    ライト、ダーク、カスタムの3種類が選べます。カスタムでは、見出し(h2)、投稿者、投稿時間等の色が選択した色に変わります。

    ヘッダテキスト色

    サイトのタイトルとキャッチフレーズの文字色が、選択した色に変わります。

    ヘッダーメディア

    ヘッダー動画、ヘッダー画像をアップロードして選択することができます。最大、アップロードサイズが2MBであることと、写真をアップロードする場合は、Exif情報を削除することを忘れないようにしましょう。本サイトでは、事前に作成したヘッダ用の画像をアップロードして使用しました。

    メニュー

    トップメニューとソーシャルリンクメニューを作成します。

    トップメニューの作成

    本サイトでは、以下のメニューの項目を作成しました。カテゴリをベースにして作成していく構造にしています。

    • HOME
    • トップカテゴリ①(システム設計)
    • トップカテゴリ②(システム構築)
    • トップカテゴリ③(システム活用)
    • トップカテゴリ④(システム開発)
    • Instagram

    ソーシャルリンクメニューの作成

    本サイトでは、以下のソーシャルリンクメニューの項目を作成しました。

    • Facebook
    • Twitter
    • Google+
    • Instagram

    ウィジェットのカスタマイズ

    ウェジェットのカスタマイズを行います。ブログサイドバーを選択して、表示したいウィジェットのみが表示されるようにします。

    ホームページ設定

    トップページのURLにアクセスした時の表示を設定します。

    ホームページの表示

    「最新の投稿」と「固定ページ」が選べます。ブログは、最新の投稿がよいかもしれません。本サイトは、記事の投稿順はあまり重要ではないく、体系的に記事を整理していきたいのので「固定ページ」を選びました。

    ホームページ

    ホームページの表示に「固定ページ」選んだため、固定のページを選択します。本サイトでは、「本サイトについて」のページをホームページに設定します。

    テーマオプション

    「Twenty Seventeen」固有のオプションになります。トップページのデザインを選択します。

    固定ページレイアウト

    「1カラム」と「2カラム」が選択できます。本サイトは、「1カラム」を選択しています。

    フロントページ第1セクションのコンテンツ

    固定ページを選択します。本サイトでは、「本サイトの構成について」のページを設定しています。ホームページで設定した固定ページの下に表示されます。

    フロントページ第2セクションのコンテンツ

    固定ページを選択します。本サイトでは、「本サイトのプライバシーポリシーについて」のページを設定しています。「Twenty Seventeen」としては、第4セクションまで設定できます。

    お問い合わせページの作成

    お問い合わせのページは、お問い合わせの内容をメール送信するなど、ページ特有の機能が必要になるので、ページ作成の効率化の観点でプラグインをインストールして作成します。本サイトでは、「Contact Form 7」を使用しています。

    プラグイン「Contact Form 7」のインストール

    WordPressのメニューから、「プラグイン」→「新規追加」を選び、「Contact Form 7」を検索、選択、インストールして有効化します。

    プラグイン「Contact Form 7」の設定

    デフォルトでお問い合わせページのフォームが作成されています。「フォーム」のタブで、表示項目を設定し、「メール」のタブで送信先、送信元のメールアドレスを設定します。設定を終えたら、お問い合わせの固定ページで指定するショートコードを控えておきます。

    固定ページの作成とメニューへの登録

    お問い合わせの固定ページを作成し、本文のテキストにショートコードを記載します。これだけで、お問い合わせフォームが表示されるようになります。メニューからたどってアクセスできるように、トップメニューに登録します。お問い合わせを表示したら、実際にお問い合わせを入力して、お問い合わせ内容のメールが受信できるか確認しましょう。

    CSSによるカスタマイズ

    CSSを使用してサイトの見栄えを良くします。本サイトで調整を行った項目は以下になります。

    • フォント
    • 見出し
    • リスト
    • 表組み

    フッターにサイトのコピーライトを表示

    フッターにサイトのコピーライトを表示します。

    <表示形式:サイト開設年>
    © 2017 Laboratory for Personal ICT.

    <表示形式:サイト開設翌年以降>
    © 2017-2018 Laboratory for Personal ICT.

    コピーライトを表示する部分は、site-info.phpに記載されています。site-info.phpを子テーマにコピーし、「site-info」のセクション記述を、以下のように置き換えます。

    $ cd /var/www/html/system/wp-content/themes/twentyseventeen/template-parts/footer
    $ sudo mkdir -p /var/www/html/system/wp-content/themes/twentyseventeen-child/template-parts/footer
    $ sudo chown -R apache:apache /var/www/html/system/wp-content/themes/twentyseventeen-child/template-parts
    $ sudo cp -p ./site-info.php /var/www/html/system/wp-content/themes/twentyseventeen-child/template-parts/footer/site-info.php
    $ cd /var/www/html/system/wp-content/themes/twentyseventeen-child/template-parts/footer
    $ vi ./site-info.php
    <?php
    /**
     * Displays footer site info
     *
     * @package WordPress
     * @subpackage Twenty_Seventeen
     * @since 1.0
     * @version 1.0
     */
    
    ?>
    <div class="site-info">
    &copy; <?php $from_year=2017; $now_year=date('Y');echo $from_year; if ($from_year < $now_year) { echo '-'.$now_year; } ?> <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a> All Rights Reserved.
    </div><!-- .site-info -->
    

    ソースコードの表示

    ソースコードの表示はcodeタグで行いますが、見栄えがしないのでプラグインの力を借りることにします。本サイトでは、プラグイン「SyntaxHighlighter Evolved」を使用しています。

    アーカイブの表示

    投稿の一覧表示する場合の、表示をカスタマイズします。デフォルトでは、全文表示されるのでようやく表示に変更します。

    $ cd /var/www/html/system/wp-content/themes/twentyseventeen
    $ sudo cp -p ./archive.php ../twentyseventeen-child/
    $ cd /var/www/html/system/wp-content/themes/twentyseventeen-child
    $ sudo vi ./archive.php
    ...
    

    <修正前>

    get_template_part( 'template-parts/post/content', get_post_format() );
    

    <修正後>

    get_template_part( 'template-parts/post/content', 'excerpt' );
    

    追加のプラグイン

    最後に、追加しておきたいプラグインを紹介します。

    プラグイン「WP Multibyte Patch」のインストール

    プラグイン「WP Multibyte Patch」をインストールして、有効化します。日本語に関する修正が行われ、例えば記事の要約表示の文字数のカウント方法が変わり、表示される文字数が変わります。

    おわりに

    本稿では「Twenty Seventeen」のテーマを使用して、サイトのカスタマイズを行い、サイトのデザインを整えました。サイト基本形が整ったところで、次はサイトのセキュリティ対策を行います。続きは、以下の記事にお進みください。