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

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

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

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

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

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

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

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

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

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

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

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

このように追加します。

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

の部分を、

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

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

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

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

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

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

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

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

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

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

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

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

表画面を見てみると、

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

トップページ以外では

表示されていません。

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

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

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

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

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

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

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

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

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

まず子テーマのfunctions.phpに

このコードを入れます。

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

このように追加。

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

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

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

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

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

[Amazon sponsored link] WordPressデザイン 関連本
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

コメント

  1. 高橋明 より:

    大変参考になる情報をありがとうございます。とても助かっています。
    「twentyfourteen」のトップページに、「BizVektor」のウィジット「メイン画像直下(トップページ)」のように、メイン画像の直下に左右目いっぱいの幅で表示できるウィジットを設置したいと思っております。
    もし、やり方をご存じでしたら、教えていただけませんでしょうか?

    • 兎本美佳 兎本美佳 より:

      高橋さん、こんにちは。
      >「twentyfourteen」のトップページに、「BizVektor」のウィジット「メイン画像直下(トップページ)」のように、メイン画像の直下に左右目いっぱいの幅で表示
      ということなのですが、twentyfourteenはメイン画像ってありましたでしょうか?ちょっとそこがわからなくて試せていません。ご希望の位置や大きさがわかれば試してみることもできるかと思います。

      • 高橋明 より:

        お返事が遅れてすみません。
        このページでご紹介いただいているウィジットはサイドバーがある場合、その左側にあります。
        設置したかったウィジットは、その上のbody部とheader部の間の位置に左右目いっぱいにしたものです。
        説明がつたなくてすみません。イメージできますでしょうか?

  2. 兎本美佳 兎本美佳 より:

    高橋さん、こんにちは。
    場所がわかりましたので試して入れてみました。絵とかコードがコメントで入れにくかったのでこのブログに追加してみましたので見たいただければと思います。よろしくお願いします。

トップへ戻る