STIGENR5のヘッダー画像下にウィジェットを追加して3PRエリアを表示させる
本書でも(改訂版)フィーチャーしているWordPressテーマ「STINGER5」ですが、基本的にすごくベーシックな機能を提供することが目的になっていて(多分)、いろいろと自分なりに使い勝手を追求する場合は、ある程度のカスタマイズが必要となってきます。
STINGERのカスタマイズはWEBで探せばいろいろ見つかると思いますので、ここでは少しニッチにピンポイントなカスタマイズ方法をご紹介します。
Contents
ビジネステーマで投稿の新着順で表示しつつ固定コンテンツを表示したい場合
WordPressでビジネステーマを使う際に最初にオススメしているのがBizVektorなんですが、特にこのテーマの3PRエリアという機能がお気に入りです。
というのも、WordPressの場合フロントページ(トップページ)の選択は「特定の固定ページ」か「投稿の新着順」の二択となっています。でも実際には「一部固定的な情報を表示しながら、投稿を新着順に表示したい」というニーズが高かったりします。そんな時にBizVektorを使えば、3PRエリアに見て欲しい情報を固定的に表示しながら、設定でフロントページを投稿順に設定することで、そのようなニーズに対応できるのですね。
これは本書でも紹介したBizVectorの姉妹テーマ(妹分?)のLightning+セットで使いたいプラグイン「VK All in One Expansion Unit」の3PRエリア機能を使えば同様の機能を実現できます。
というのも、Lightningには「ヘッダー画像下のウィジェットエリア」が設定されているので、ここに3PRエリアを配置すれば、BizVectorと同じような表示が可能になるわけです。
ではSTINGERで同じようなことをするためにはどうしたらいいのか。
Lightningも素晴らしいテーマなのですが、すでにSTINGERでゴリゴリサイトを作ってしまっているので、今更手放せないという方もいらっしゃることでしょう。
ということで、これはもう、テーマ自体をカスタマイズしなければなりません。
ということで、今回はややレベルが高くなりますが、テーマの編集をしてしまおうと思います。
なお、テーマの編集は、最悪の事態としてサイトが表示できなくなってしまう、それも、ダッシュボードにさえログインできなくなってしまう可能性もあるので、必ず全てのバックアップを取ってから作業しましょう。
ここに書いたことを試してみて起こりうる全ての責任は取り兼ねますのでご了承ください。
テーマをカスタマイズする
ということで、テーマをカスタマイズします。
書籍の中では「一切触れるな」と記述している「外観」→「テーマの編集」に手をつけます。
テーマの編集とは、テーマを構成しているPHPやCSSのコードを書き換えるための機能です。そのため、コードを書き間違えると、ページが表示されなくなるばかりか、ログインすらできなくなる可能性があります。特に気をつけなければならないのが、全角と半角の違い、そして不要な「スペース」です。全角やスペース(全角も半角も)がコード内に紛れ込むと大変なことになります。(特にプログラマーが恐れるのが「全角スペース」の混入です)
ということで、バックアップを取って失敗したら復帰できるようにするのが鉄則ですということをお伝えするための脅しはここまでにして…
というか、その辺りの話がよくわからない方はカスタマイズは避けた方が良いですよ。
では、説明を。
まずは「テーマの編集」で「テーマのための関数 (functions.php)」を開きます。ここに表示されるコードに以下のコードを追加します。
ちなみにこの「テーマのための関数 (functions.php)」は、一番間違えてはいけないコードです。ここでエラーが出るとダッシュボードにログインできない「何もかも白紙」サイトになってしまいます。
追加する場所は図の赤枠の範囲内です。
ここである必要はないのですが、他のコードの途中にコードを追加すると大変なことになってしまいますので。
1 2 3 4 5 6 7 8 9 |
//ヘッダーへウィジェットエリア追加 register_sidebar(array( 'name' => 'header-widget' , 'id' => 'header-under' , 'before_widget' => '<div class="header-widget">', 'after_widget' => '</div>', 'before_title' => '<h3>', 'after_title' => '</h3>' )); |
これで一旦「ファイルを更新」ボタンをクリックします。
もしエラーが出たら、その時点で全てのページが表示できなくなります。
無事表示されているようでしたら、次は「ヘッダー (header.php)」にコードを追加してください。
1 2 |
<!-- ヘッダーウィジェットエリア追加 --> <?php dynamic_sidebar('header-under'); ?> |
追加する場所はSTINGR6であれば
<?php get_template_part( ‘st-header-image’ ); //カスタムヘッダー画像 ?>
の後です。
3PRエリアをの表示のためのCSSを追加する
ということで、これでヘッダー画像下に「header-widget」エリアが追加されました。「ウィジェット」を確認するとウィジェットエリアにあたらしくheader-widget」が増えているはずです。
ここにVK All in One Expansion Unitの「VK_3PRエリア」を追加すれば、画像下に3PRエリアが表示されます。
ただし「VK_3PRエリア」はLightning以外のテーマで設定する場合、サイドバーに表示させるのが基本となるため、表示が横並びでなく縦並びになってしまいます。
これを横並びにするためには、Lightningのように表示する「CSS」を自作する必要がありますが、今日はまずここまでで。(要望が多ければ改めて別記事にて筆者のカスタムCSSを紹介します)
まずはSTINGERのヘッダー画像下にウィジェットを追加する方法を覚えておきましょうね。
とりあえずこれでフロントページを投稿の新着順に設定しても、ページ上部に固定コンテンツを表示できるようになるわけです。
記事の執筆者プロフィール
- WordPress著者、講師、クリエイター
- 「はじめてのWordPress入門」著者。WordPressスクール、プライベートレッスン、コンテンツ制作コンサルティングなどで「自分で発信するコンテンツ」づくりをサポート。All AboutではLINEの使い方を定期連載。
この執筆者が書いた記事
コンテンツマーケティング手法2017.04.19WordPressを使ったコンテンツマーケティング。しかし本当に必要なスキルとは?
コンテンツマーケティング手法2016.08.19コンテンツマーケティングは簡単にできるものなのか
スクール紹介2016.05.23ワードプレス動画講座(YouTubeチャンネル)で学んでください
WordPressのSEO2016.03.31SEOのための段落見出し(h)タグは重要