WordPressテーマ「Garyu」が持つ機能やウィジェットについて

前回の記事でWordPressテーマ「Garyu」の子テーマを作成する方法について解説しましたが、カスタマイズを進めるうえで「Garyu」が持つ機能について確認しておく必要があります。

WordPressテーマ「Garyu」の子テーマを作成する方法

前回の記事でWordPressテーマ「Garyu」のインストール手順について解説しましたが、テーマをカスタマイズする場合は「子テーマ」を作ることが一般的です。直接テーマをカスタマイズした場合、テーマがアップデートされた場……

今回は「Garyu」が持つ機能やウィジェットについて解説します。

「Garyu」が持つ機能について

スタイルの標準化

WordPressに限らず、ホームページの見え方はデバイスやブラウザが異なった場合でも、ほぼ同様の見え方になるようにした方が親切です。スタイルを標準化する方法はいくつかありますが、「Garyu」は最初にnormalize.css 8.0.0がCDNより組み込まれるようにしています。

この後、「Garyu」自身やその子テーマのcssによりスタイルの定義を行っています。スタイルシートの定義の際はnormalize.cssの影響を受けることを念頭に記述するようにしてください。

Webアイコンフォント「Font Awesome」について

「Garyu」にはWebアイコンフォントとして「Font Awesome 4.7.0」がCDNより組み込まれるようにしています。

「Font Awesome 4.7.0」の使い方

基本的にアイコン一覧ページから使いたいアイコンを探し、記事内で使用したいところにコードを貼り付けるだけです。例えば

<i class="fa fa-address-book" aria-hidden="true"></i>

このような記述を文中に追加することで、address-bookのアイコンを表示させることができます。注意点として組み込まれている「Font Awesome」が4系であるため、5系のアイコンは使用できませんのでご注意ください。

jQueryについて

WordPressに限らず、ウェブページでjQueryが使用されるのが当たり前のようになっています。ただし、jQueryにはいくつかのバージョンがあり、プラグインなどを使用する場合にjQueryのバージョンによっては正常に動作しなくなるケースが少なくありません。

WordPressプラグインはjQuery 1.xを使用することを前提としているものが多いため、「Garyu」ではWordPressが極力安定動作するように、jQueryはバージョン1.12.4がCDNより組み込まれるようにしています。

jQueryプラグインについて

WordPressのプラグインではなくjQueryのプラグインの話ですが、ウェブページで使用機会が多いと思われるLightbox系プラグイン「Lightbox2 2.10.0」がCDNより組み込まれるようにしています。そのため、独自でWordPressのLightbox系プラグインを追加する必要がありません（追加することで正常に動作しなくなるかもしれません）。

またLightbox2プラグインへの配慮として、投稿や固定ページにメディアを追加する場合、挿入されるタグに以下の処理が実行されます。このため、利用者が特に意識せずにLightboxが動作するようになっています。

aタグに rel=”lightbox[group]”を自動的に組み込みます。
添付ファイルに代替テキストが登録されている場合、aタグのtitleとimgタグのtitleに代替テキストの内容が反映します。

アイキャッチ画像の自動表示

「Garyu」では新着記事や関連記事を表示する際に投稿に設定されたアイキャッチ画像を表示する仕組みとなっています。その際、以下の状況に従ってアイキャッチ画像を表示するようになっています。

アイキャッチ画像が登録されている場合、その画像が使用されます。
アイキャッチ画像が登録されておらず、記事内に何らかの画像が挿入されている場合、記事の最初に挿入されている画像をアイキャッチ画像として使用します。
アイキャッチ画像が登録されておらず、かつ記事内に画像が挿入されてない場合、子テーマフォルダ内「images」フォルダのnoimage.pngファイルがあれば、その画像をアイキャッチ画像として使用します。
上記全てに該当しない場合、「Garyu」テーマが用意しているnoimage.pngファイルをアイキャッチ画像として使用します。

独自に代替アイキャッチ画像を使用する場合、以下の手順に従って作業を進めてください。作業にはFTPクライアントが必要となります。

「noimage.png」のファイル名で代替画像を用意します。
子テーマフォルダのサブフォルダとして「images」フォルダを作成します。
「noimage.png」ファイルを上記で作成した「images」フォルダへ転送します。

自動的にアイキャッチ画像を登録するWordPressプラグインもありますが、「Garyu」ではプラグインに頼らず、代替画像を表示する方法を採用しています。

メニューについて

WordPressで必須と言えるメニューですが、「Garyu」には3つのメニューを作成できます。それぞれ以下の場所に配置が可能です。

ヘッダ画像の上
ヘッダ画像の下
フッタ

このうち、ヘッダ画像の下のメニューについてはモバイルスタイルなど画面サイズによって、アコーディオンメニューとして使用できるようにJavascriptのコードを加えています。

規模が大きいページ（例えば企業向け）では目的に応じて複数のメニューを使い分けることが可能です。

ウィジェットエリアについて

「Garyu」には5つのウィジェットエリアを用意してあります。目的に合わせてウィジェットを設定することができます。ウィジェットエリアは以下の通りです。

サイドバー
サイドバー（スクロール）
ホームページの下
固定記事の下
投稿記事の下

「サイドバー」ウィジェットエリア

記事のサイドに配置されるエリアです。検索ウィジェットやカテゴリー一覧、広告のコードなどを配置するのに向いています。

「サイドバー（スクロール）」ウィジェットエリア

上記の「サイドバー」ウィジェットエリアと似ていますが、以下の留意点があります。

「サイドバー」ウィジェットエリアの下に配置されます。
スクロールに追従して表示が固定されます。
モバイルスタイルなど画面サイズによって非表示になります。
未承認のGoogle AdSenseは配置できません。

Google AdSenseの自動広告がこのエリアに表示される場合があるようですが、試験的にウィジェットエリアの高さを調節するようにしています。体裁が崩れるようなことはないと考えられますが、いろいろ試してみてGoogle AdSenseの自動広告と相性が悪い場合は仕様を避けた方が良いでしょう。

その他のウィジェットエリア

いずれもホームページ、固定ページ、投稿ページの記事の下にウィジェットが配置されます。私がカスタマイズしてある子テーマでは「SNSボタンの表示」「関連記事の表示」を設定してあります。

「Garyu」のウィジェットについて

「Garyu」にはいくつかのウィジェットを用意してあります。あったら便利という機能でウィジェットで実現可能なものを作成しています。使いたいウィジェットを選択して配置するようにしてください。

SNSボタンの表示

せっかく作ったブログですので、たくさんの方に読んでもらいたいと思うのは当然のことでしょう。WordpressにSNSボタンは必須とまでは言いませんが、SNSボタンは記事拡散の手助けくらいにはなると思います。

ショートコードについて

「Garyu」にはショートコードも用意してあります。ショートコードは固定ページ、投稿ページで使用できます。

ブログカード表示

固定ページ、投稿ページで内部リンクを見栄え良く表示させることができます。

使用例	[BlogCard blog_id=100 blog_type=0 blog_card_class=blogCardStyle]
blog_id	（必須）固定ページ、投稿ページのIDを指定します。
blog_type	（任意）ブログカードの種類を指定します。 0:サムネイル・タイトル・抜粋記事 1:タイトルのみ ※省略時はgaryu設定に従います。
blog_card_class	（任意）ブログカード全体をまとめる <article> タグに設定されるクラス名を指定します。 ※省略時はgaryu設定に従います。