本書でも（改訂版）フィーチャーしているWordPressテーマ「STINGER5」ですが、基本的にすごくベーシックな機能を提供することが目的になっていて（多分）、いろいろと自分なりに使い勝手を追求する場合は、ある程度のカスタマイズが必要となってきます。

STINGERのカスタマイズはWEBで探せばいろいろ見つかると思いますので、ここでは少しニッチにピンポイントなカスタマイズ方法をご紹介します。

ビジネステーマで投稿の新着順で表示しつつ固定コンテンツを表示したい場合

WordPressでビジネステーマを使う際に最初にオススメしているのがBizVektorなんですが、特にこのテーマの３PRエリアという機能がお気に入りです。
というのも、WordPressの場合フロントページ（トップページ）の選択は「特定の固定ページ」か「投稿の新着順」の二択となっています。でも実際には「一部固定的な情報を表示しながら、投稿を新着順に表示したい」というニーズが高かったりします。そんな時にBizVektorを使えば、３PRエリアに見て欲しい情報を固定的に表示しながら、設定でフロントページを投稿順に設定することで、そのようなニーズに対応できるのですね。
これは本書でも紹介したBizVectorの姉妹テーマ（妹分？）のLightning＋セットで使いたいプラグイン「VK All in One Expansion Unit」の３PRエリア機能を使えば同様の機能を実現できます。
というのも、Lightningには「ヘッダー画像下のウィジェットエリア」が設定されているので、ここに３PRエリアを配置すれば、BizVectorと同じような表示が可能になるわけです。
ではSTINGERで同じようなことをするためにはどうしたらいいのか。
Lightningも素晴らしいテーマなのですが、すでにSTINGERでゴリゴリサイトを作ってしまっているので、今更手放せないという方もいらっしゃることでしょう。
ということで、これはもう、テーマ自体をカスタマイズしなければなりません。
ということで、今回はややレベルが高くなりますが、テーマの編集をしてしまおうと思います。

なお、テーマの編集は、最悪の事態としてサイトが表示できなくなってしまう、それも、ダッシュボードにさえログインできなくなってしまう可能性もあるので、必ず全てのバックアップを取ってから作業しましょう。
ここに書いたことを試してみて起こりうる全ての責任は取り兼ねますのでご了承ください。

テーマをカスタマイズする

ということで、テーマをカスタマイズします。
書籍の中では「一切触れるな」と記述している「外観」→「テーマの編集」に手をつけます。
テーマの編集とは、テーマを構成しているPHPやCSSのコードを書き換えるための機能です。そのため、コードを書き間違えると、ページが表示されなくなるばかりか、ログインすらできなくなる可能性があります。特に気をつけなければならないのが、全角と半角の違い、そして不要な「スペース」です。全角やスペース（全角も半角も）がコード内に紛れ込むと大変なことになります。（特にプログラマーが恐れるのが「全角スペース」の混入です）
ということで、バックアップを取って失敗したら復帰できるようにするのが鉄則ですということをお伝えするための脅しはここまでにして…
というか、その辺りの話がよくわからない方はカスタマイズは避けた方が良いですよ。

では、説明を。
まずは「テーマの編集」で「テーマのための関数 (functions.php)」を開きます。ここに表示されるコードに以下のコードを追加します。
ちなみにこの「テーマのための関数 (functions.php)」は、一番間違えてはいけないコードです。ここでエラーが出るとダッシュボードにログインできない「何もかも白紙」サイトになってしまいます。
追加する場所は図の赤枠の範囲内です。
ここである必要はないのですが、他のコードの途中にコードを追加すると大変なことになってしまいますので。

 

これで一旦「ファイルを更新」ボタンをクリックします。
もしエラーが出たら、その時点で全てのページが表示できなくなります。
無事表示されているようでしたら、次は「ヘッダー (header.php)」にコードを追加してください。

追加する場所はSTINGR6であれば

<?php get_template_part( ‘st-header-image’ ); //カスタムヘッダー画像 ?>

 

の後です。

3PRエリアをの表示のためのCSSを追加する

ということで、これでヘッダー画像下に「header-widget」エリアが追加されました。「ウィジェット」を確認するとウィジェットエリアにあたらしくheader-widget」が増えているはずです。
ここにVK All in One Expansion Unitの「VK_3PRエリア」を追加すれば、画像下に３PRエリアが表示されます。
ただし「VK_3PRエリア」はLightning以外のテーマで設定する場合、サイドバーに表示させるのが基本となるため、表示が横並びでなく縦並びになってしまいます。
これを横並びにするためには、Lightningのように表示する「CSS」を自作する必要がありますが、今日はまずここまでで。（要望が多ければ改めて別記事にて筆者のカスタムCSSを紹介します）
まずはSTINGERのヘッダー画像下にウィジェットを追加する方法を覚えておきましょうね。
とりあえずこれでフロントページを投稿の新着順に設定しても、ページ上部に固定コンテンツを表示できるようになるわけです。