なりきりアーキテクト

WordPressへのテーマの導入

WordPress WordPressへのテーマの導入

WordPressの素晴らしい点はテーマによるデザインの変更とプラグイン導入でしょう。
連載の7回目では、テーマの導入方法について扱います。

テーマ選びとカスタマイズはWordPressの導入で一番時間のかかる作業です。
正直言って面倒で気が重くなります…何よりデザインセンスが問われます(-_-;)
また、先にプラグインを入れがちですが、テーマに存在しない機能をプラグインで補うため、先にテーマを導入します。

なお、今回の内容はあまりAzureは関係ありません。

目次

テーマの選び方

テーマには大きく分けて三つの選び方があると思います。

  • 見た目（デザイン）で選ぶ
  • 機能の豊富さで選ぶ（SEO、ランキング機能、etc）
  • 有料/無料のテーマから選ぶ

何を重視するかにも依りますが、やっぱり見た目重視です。
どんなにSEOに優れたテーマでも、見た目が気に入らなければ導入しません。
例えば、有料で人気のテーマを適用してもデザインが気に入らないといったことは普通にあります。
これには別の側面があり、人気サイトでは大概は何らかのカスタマイズをしており、他サイトで使用しているテーマを導入しても見た目が異なることがあります。

ちなみに、本サイトでは有料テーマのThe Thorを使っており、無料テーマであばLion Blogをお勧めします。
また、見た目や機能をある程度カスタマイズしています。

私が重要視したのは以下の点です。

  • 見た目（デザイン）
  • 軽量である（画面の表示が速い）
  • 機能の豊富さ（主にSEO）
  • レスポンシブデザイン
  • 子テーマが使用可能

特に注意したいのが、機能が多いテーマはJavaScriptやCSSを多用しており、画面表示に時間がかかる傾向があります。
また、カスタマイズを前提とした場合、親テーマとの差分を定義できる子テーマが利用可能なものを選ぶとバージョンアップ時の対応が容易になります。

加えて、Windows環境のAzure App Serviceを使用する場合、テーマが動作しないことがあり得ます。
例えば、キャッシュ機能のようなWordPressの基本動作に影響する機能を組み込んだテーマは動作するか怪しくなります。

WordPress提供のテーマ

実はテーマの選び方（導入方法）にはもう一つの考え方があり、WordPressで提供しているテーマから選ぶ方法があります。
WordPress提供のテーマは管理画面から選択してインストールできるため、とても便利なのですが以下の理由からお勧めしません。

  • 画面下部にテーマのクレジット表示が入る（作者情報）
  • 日本語に対応したテーマが少ない

探せばSEOに優れたテーマもありますが、デザイン面まで考えると気に入るテーマは少ないと感じます。
地道にインターネットから検索した方が気に入ったテーマが見つかる確率が高いでしょう。

テーマのインストール

テーマをインストールする場合、zipファイル化されたファイルをWordPressに登録する必要があります。
試しに無料テーマのLionBlogをインストールしてみます。
LionBlogのダウンロードページからLionBlogの親テーマと、子テーマをダウンロードします。
ダウンロードにはユーザ登録が必要ですが、ここでは詳細は扱わず、ファイルをダウンロードできたとして話を進めます。

まず、テーマを導入する場合は事前にWordPressのバックアップを取得しておきましょう。
バックアップを取得したら管理画面にアクセスします。
https://作成したドメイン/wp-admin/

親テーマをインストールしてみましょう。
「外観」⇒「テーマ」を選択し、画面上部の「新規追加」ボタンを押します。

テーマの追加

「テーマのアップロード」ボタンを押し、ダウンロードした親テーマのzipファイルを選択して「今すぐインストール」ボタンを押してUploadします。

テーマの追加

完了したらテーマのページに戻り、同様に子テーマもインストールします。
※子テーマだけインストールはできません。

インストールが完了したら「有効化」ボタンを押す、またはテーマの一覧画面からインストールした子テーマを有効化します。

テーマの追加

テーマのカスタマイズ

テーマを有効化しただけでも利用可能ですが、通常は外観を変更します。
基本的にはWordPressの管理画面から変更しますが、それでは対応できない範囲はテーマをそのものを修正します。

管理画面からの変更

管理画面から外観等を変更したり、ウィジェットを配置します。

テーマ設定の変更

管理画面から「外観」⇒「カスタマイズ」を選択します。
変更できる内容はテーマによって様々ですが、主に以下のような項目を変更しましょう。

  • 色（基本色、背景色等）
  • H2～H5までのスタイル（これ決めるのが一番時間かかるかも）
  • サイト全体のタイトル構成（「ページタイトル | サイト名」等）
  • Topページの表示内容（投稿か固定ページ化、キャッチコピー、Topページの場合タイトル）
  • アイキャッチ画像（使用有無、サイズ）
  • サイトアイコン
  • Copyright

テーマによっては以下のような機能もあります。

  • 表示するSNSアイコン（シェアボタン）
  • 関連記事の表示（前後の記事、関連する記事）
  • 目次表示
  • アクセスランキング表示
  • アクセス解析（Google Analytics等のトラッキングコードの表示）
  • 広告コード（Adsense等の広告の表示）
  • キャッシュ設定（minify、gzip圧縮、ブラウザキャッシュ等）
テーマのカスタマイズ

ウィジェットの配置

画面の右側等にカテゴリ一覧や人気の記事等配置するエリアをウィジェットと呼びます。
サイトの印象や使い勝手にも影響するので、便利そうなウィジェットは積極的に配置するようにしましょう。

管理画面から「外観」⇒「ウィジェット」を選択します。
利用可能なウィジェットはテーマによって変わりますが、以下のようなウィジェットを配置すると良いでしょう。

  • 検索
  • 記事への導線（カテゴリー、アーカイブ、人気記事、タグクラウド、最近の投稿等）
  • 広告
ウィジェットの配置

プログラムの変更

プログラムができる人は、CSSやプログラムを修正することで見た目や動作を変更することができます。
「プログラムをいじることなんてあるの？」と思うかもしれませんが、WordPress（又はテーマ）で変更できる内容は限られていて、細かい不満が色々出てきます。
例：隙間が大きいので変更したい、プラグインにない機能を追加したい

本サイトでは余白の調整等でスタイルを、連載記事を表示するためにプログラム（PHP）をカスタマイズしています。

変更するにはMicrosoft Azure Portalにアクセスします。
WordPressをデプロイしてあるAzure App Serviceを選択し、「App Service Editor」を使って変更していきます。

スタイルの変更

スタイルの変更は基本的に子テーマに対して適用します。
変更するファイルはテーマによって異なります。

例えば、Lion Blogの場合は以下のファイルを変更します。
wp-content/themes/lionblog-child/style.css
本サイトで使用しているThe Thorの場合は以下のファイルを変更します。
wp-content/themes/the-thor-child/style-user.css

以下、本サイトで使用しているcssの一部を掲載します。
基本は余白や文字サイズ等を調整しています。
※本サイトで使用しているCSS全体はここからダウンロードできます

.content ul > li:before{
    transform: scale(0.5);
}
.content ol > li:before{
    top: 0.3rem;
}
.content h2, .content h3, .content h4, .content h5 {
    margin-top: 3rem;
}
.content ul li, .content ol li {
    margin-top: 0.5rem; 
}
.widget {
    margin-bottom: 20px;
}

プログラムの変更

プログラムを修正することはめったにありませんが、試しにLion Blogのカスタマイズ例を二つ示します。

一つ目は、カテゴリの説明にHTMLを使用可能にしてみましょう。
以下のファイルのユーザーカスタマイズエリアにコードを追加します。
wp-content/themes/lionblog-child/function.php

//////////////////////////////////////////////////
//下記ユーザーカスタマイズエリア
//////////////////////////////////////////////////
remove_filter( 'pre_term_description', 'wp_filter_kses' );

二つ目は、日付フォーマットが「yyyy.,mm.dd」なので「yyyy/mm/dd」に変更してみましょう。
※Lion Blogは現時点で管理画面でのフォーマット指定が効かない

まずは以下のファイルを
wp-content/themes/lionblog/single.php
ここにコピーし、子テーマでプログラムを修正できるようにします。
wp-content/themes/lionblog-child/single.php

そして、コピーしたファイルで以下のような場所（’y.m.d’の部分）を探して

…
<?php the_time('Y.m.d'); ?>
…
<?php echo get_the_time('Y.m.d' , $prevpost->ID ); ?>
…
<?php echo get_the_time('Y.m.d' , $nextpost->ID ); ?>
…
<?php the_time('Y.m.d'); ?>
…

以下のように変更します。
これで投稿ページの日付フォーマットが管理画面で設定したフォーマットで表示されます。

…
<?php the_time(get_option('date_format')); ?>
…
<?php echo get_the_time(get_option('date_format') , $prevpost->ID ); ?>
…
<?php echo get_the_time(get_option('date_format') , $nextpost->ID ); ?>
…
<?php the_time(get_option('date_format')); ?>
…

テーマによっては最初からカテゴリにHTMLを使用できたり、日付フォーマットが管理画面のフォーマットに従うように作られているため、今回示した方法が不要なテーマも多いと思います。

さて、外観を思うように変更できたでしょうか？
次回はテーマでは対応できない機能をプラグインで補っていきます。

WordPressの最新記事8件