MENU
WordPressを中心にITネタを画像付きでわかりやすく丁寧に解説(旧:ゆうそうとITブログ)
当サイトには広告が含まれております

【twentyfourteen編】トップページだけに表示するウィジェットエリアを作る

広告
WordPress テーマ 全般
この記事は最終更新日から5年経過しています。内容が古い可能性があります。

先日のWordPress勉強会で固定ページと投稿ページの両方をトップページに出したいという要望がありました。調べてみたのですが、どうもそれは無理そうです。となると…じゃぁウィジェットでトップページに「ご挨拶」的な文章だけ載せられればいいのかなと思ったのですが、トップページというかメインエリアに出すウィジェットが使っているテーマのtwentyfourteenにはありませんでした。
ウィジェットエリアを追加する、ということはしたことがなかったのですがこの際ちょっとやってみようと思って、トライしましたのでそれについて書きます。

記事をざっと見る

ウィジェットをエリア追加してどのような表示がしたかったのか

ウィジェットエリアを追加して例えば

こんな風にトップページにだけ「ごあいさつ」とか急に知らせたいことがあったときに文章を載せたりしたいと思いました。ここに入れる　トップページウィジェットエリア　を作りたいです。

ウィジェットエリアを追加する方法

ウィジェットを追加する方法について検索して、こちらのページを見つけました。

メインカラムにウィジェットエリアを実装する方法

WordPressのウィジットエリアを追加する方法

この２つのページを参考にさせてもらって、トップページのメインエリアに表示するウィジェットエリアを追加してみます。今回はtwentyfourteenの子テーマを作り、twentyfourteen-childという名前にしたものを使っているという前提で書きます。

まず、使っている子テーマのfunctions.phpに

if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_main_widget site-content" id="%1$s">'."\n",
        'after_widget' => '
'."\n",         'before_title' => '<h3 class="main_headline entry-header"><span>',         'after_title' => '</span></h3><div class="entry-content">',         'name' => 'トップメイン',         'id' => 'top_main_widget'     )); }

このコードを追加します(functions.phpがなければ作る。1行目に　<?php　と書いておくこと)。これでウィジェットに　トップメイン　というウィジェットが追加されます。このウィジェット用にcssも指定します。子テーマの　style.css　に

.top_main_widget {
    margin-bottom:20px;
    max-width: 672px;
}

このように追加します。

twentyfourteen から子テーマフォルダに　index.php　をコピーして

    <div id="primary" class="content-area">
        <div id="content" class="site-content" role="main">

の部分を、

    <div id="primary" class="content-area">
    <?php
    if (is_front_page()){
        dynamic_sidebar('top_main_widget');
    }
    ?>
        <div id="content" class="site-content" role="main">

このように5行追加します(もしhome.phpを作ってあればそちらにこの記述をします)。この部分は　もしトップページだったら　top_main_widget　を表示するということが書いてあります。

しかし、考えてみるとtwentyfourteenはpage.phpやsingle.phpがあるのでこのif文はいらなかったのかも、しれません(^_^;。

これで準備が整いました。

ダッシュボードでトップメインに追加する文言を指定する

この状態で、ダッシュボード　外観＞ウィジェット　をクリックすると

トップメイン　というウィジェットエリアが表示されました。

ここに「ごあいさつ」を追加してみます。

左側の　利用できるウィジェット　から

テキスト　をクリックしてドラッグ、

トップメイン　のところへドロップします。

このように入力する画面になるので、

タイトルと内容を入力して　保存　をクリック

表画面を見てみると、

このように先ほど追加した「ごあいさつ」が表示されました(^^)/

トップページ以外では

表示されていません。

おまけ:このblogにも一瞬表示させてみました

このblogもtwentyfourteenの子テーマを使っているので同じような修正をして一瞬だけ表示させてみました。

こんなかんじです(^^)/。

ウィジェットエリアの追加方法は、

１.functions.phpで外観＞ウィジェットで表示するウィジェットエリアを追加する
２.必要があればstyle.cssで追加するウィジェット用のcssを定義する
３.表示したいテンプレート(index.phpなど)にウィジェットの表示を追加する

ということのようですね。

ちょっと分かったので、今後も追加したいウィジェットエリアがあったら色々追加してみたいと思っています。

トップの幅めいっぱいにトップメインを入れたいとき

高橋さんのコメントを見て試してみました。トップ幅めいっぱいに入れる方法です。

まず子テーマのfunctions.phpに

<?php
if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_main_widget" id="%1$s">'."\n",
        'after_widget' => '</div>'."\n",
        'before_title' => '<h3 class="main_headline entry-header"><span>',
        'after_title' => '</span></h3><div class="entry-content">',
        'name' => 'トップメイン',
        'id' => 'top_main_widget'
    ));
}

このコードを入れます。

そして子テーマのstyle.cssに

.top_main_widget {
    width:90%;
    margin:auto;
    padding:10px;
    color:#fff;
}

このように追加。

そして親テーマのtwentyfourteenから　header.php を子テーマのフォルダにコピーして

    <?php
    if (is_front_page()){?>
    <?php
        dynamic_sidebar('top_main_widget');
    }
    ?>
    </header><!-- #masthead -->

</header><!– #masthead –>の上にこのようにウィジェットを追加します。

あとは　ダッシュボードでトップメインに追加する文言を指定する の要領で、追加したい文言を入れます。

するとこのようにトップの幅めいっぱいに文字を入れることができました。

左右の空きや文字の色などはstyle.cssで指定してますので好きな感じに変えるといいかなと思います。

[amazon_searchlink search=”WordPressデザイン”]