Simplicity トップページ上部と下部に専用ウィジェットスペースをつくる

20160406-top-dedicated-widget2-imageSimplicity
Simplicity トップページ上部と下部に専用ウィジェットスペースをつくる-アイキャッチ画像
この記事は約9分で読めます。

Simplicity トップページ上部と下部に専用ウィジェットスペースをつくる

https://mitemita.com/top-dedicated-widget/
前回の記事から数か月経過しての追記記事です。

前回は以下の画像の様な横幅の広いスペースを設けました。

20160406-image1

前回作ったウィジェットエリア

幅の広い広告を入れたりインフォメーションコーナーにしたり、
Custom Post Widgetで何かしらのアナウンスコーナにしたり。と用途はあると思うのですが、
何せ横にバーンと広がるエリアなんで「このスペースはデカ過ぎる」という方向けに
トップページのみで表示させる(サイドバーにかからない)上部ウィジェットエリアと
トップページのみで表示させる下部のウィジェットエリアの追加方法を書きます。

トップページのみで表示させる上部と下部専用ウィジェットスペース-追加の場所

今回追加する場所は、以下の画像のとおりです。

20160406-image2

トップページのみで表示させる上部と下部専用ウィジェットスペース

特にサイドバーに沢山のコンテンツを入れている方は、
下部スペースが空白になりがちだと思いますので、その空白スペースの有効利用が出来ると思います。

因みに、
Simplicityでは標準仕様で”インデックスリストトップ”・”インデックスリストボトム”が備わっています。
トップ頁の他、アーカイブ一覧やカテゴリ一覧頁で表示されるウィジェットです。

“インデックスリストトップ&ボトム”に既に何かしら設定されていて、
今回作る二つのエリアも使われる場合、
「今回追加のウィジェットスペース」が「インデックスリスト」よりも上に表示されます。

それから、”インデックスリストトップ&ボトム”の表示を
分岐タグやプラグインで「トップのみ」等の表示の振り分けをされている場合、
不要な案内になるかと思います。

Simplicity親テーマのhome.phpを子テーマに複製(コピー)する

上部・下部スペース共に”home.php”を使います。
親ファイルを使わずに子テーマに複製して、子テーマのファイルとして作業します。

(1系の1.9.3を使用されている場合は、今後の更新が無い筈てすから親のファイルを直接編集しても
OKですが、間違うと不味いので、出来るだけ「親からコピー」で作業するようにしましょう。

一応、子テーマへの入れ(置き)方。

FTPでSimplicityの親テーマから、home.phpを自分のローカル側(PC)にDL して、
(手持ち保存されている場合はアップ)
そのDLしたhome.phpを、そのまま、子テーマにアップロード。これで、複製完了。

すると、外観 icon-arrow-right テーマの編集画面でも、ファイルが編集可能になります。

作業に必要なファイル

上部・下部スペース共に使用する(書き込みをする)ファイルは以下の3つのファイルです。

  • 子テーマのfunctions.php
  • 子テーマのstyle.css
  • 子テーマのhome.php
    ↑これは、先程親から引き継いだコピーのファイルという事デス。

親テーマを弄らずに子テーマだけを触るので、落ち着いてやれば平気ですよ😀

上部専用ウィジェットスペース

Simplicity 子テーマ functions.php を編集

外観 テーマの編集画面で
Simplicity child: テーマのための関数 (functions.php)を開き
functions.phpに以下の様に書き足します。

/*ウィジェットの追加*/
if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_main_small_widget" id="%1$s">'."n",
        'after_widget' => '</div>'."n",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        'name' => 'トップページメインスモール',
        'id' => 'top_main_small_widget'
    ));
}

‘トップページメインスモール’という部分はウジェットタイトルに表示されるタイトルです。
ご自身の分かり易いタイトルでも構いません。
前回は、’トップページメイン’と書いたので良いタイトルが思いつきませんでした😓

Simplicity 子テーマ style.css を編集

次に、同じテーマの編集画面で
Simplicity child: スタイルシート (style.css)を開き
style.cssに以下の様に書き足します。

/*トップページメインスモールウィジェット追加*/
.top_main_small_widget {
  padding: 10px;
  margin-bottom: 10px;
}

“padding”&”margin”はお好みで調節して下さい。
囲み線が必要な場合は以下のような感じで書き足すと良いでしょう。

.top_main_small_widget {
  background-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #eee;
}

お好みでアレンジしてください。

Simplicity 子テーマ home.php を編集

既に編集した2つのフィイルと同様、テーマの編集画面で
Simplicity child: home.php(親から引き継いだコピーのファイル)を開き以下の様に書き足します。

<?php dynamic_sidebar('top_main_small_widget'); ?>

書き足す位置は<?php get_header(); ?><?php get_template_part(‘list’) ?>の間。

<?php get_header(); ?>
<?php dynamic_sidebar('top_main_small_widget'); ?>
<?php get_template_part('list') ?>

下部専用ウィジェットスペース

Simplicity 子テーマ functions.php を編集

外観 テーマの編集画面で
Simplicity child: テーマのための関数 (functions.php)を開き
functions.phpに以下の様に書き足します。

/*ウィジェットの追加*/
if (function_exists('register_sidebar')){
    register_sidebar(array(
        'before_widget' => '<div class="top_under_small_widget" id="%1$s">'."n",
        'after_widget' => '</div>'."n",
        'before_title' => '<h3>',
        'after_title' => '</h3>',
        'name' => 'トップページ下部スモール',
        'id' => 'top_under_small_widget'
    ));
}

‘トップページ下部スモール’という部分はウジェットタイトルに表示されるタイトルです。
ご自身の分かり易いタイトルでも構いません。

Simplicity 子テーマ style.css を編集

次に、同じテーマの編集画面で
Simplicity child: スタイルシート (style.css)を開き
style.cssに以下の様に書き足します。

/*トップページ下部スモールウィジェット追加*/
.top_under_small_widget {
  padding:10px;
  margin-bottom:10px;
}

“padding”&”margin”はお好みで調節して下さい。
囲み線が必要な場合は以下のような感じで書き足すと良いでしょう。

.top_under_small_widget {
  background-color: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #eee;
}

お好みでアレンジしてください。

Simplicity 子テーマ home.php を編集

既に編集した2つのフィイルと同様、テーマの編集画面で
Simplicity child: home.php(親から引き継いだコピーのファイル)を開き以下の様に書き足します。

<?php dynamic_sidebar('top_under_small_widget'); ?>

書き足す位置は<?php get_template_part(‘list’) ?><?php get_footer(); ?>の間。

<?php get_template_part('list') ?>
<?php dynamic_sidebar('top_under_small_widget'); ?>
<?php get_footer(); ?>

ウィジェットが追加されているか確認しよう

早速確認してみましょう。外観⇒ウィジェットをクリックしてみましょう。

widget

其々のウィジェットが追加された

ちゃんと追加されました😀

後は、このウィジェットエリアに利用できるウィジェットを追加して、編集するだけです。

ご閲覧頂きありがとうございます。お粗末でした😐

以下、ウィジェットに関連する?記事です。
WordPress-Simplicity トップページ専用ウィジェットをつくる
WordPress-Simplicity トップページ専用ウィジェットをつくる 1 Simplicityの親テーマのbefore-main.phpを子テーマにコピー 2 Simplicity 子テーマでウィジットエリアの追加 2.1 Simplicity 子テーマ functions.php を編集 2.2 Simplicity 子テーマ style.css を編集 2.3 Simplicity 子テーマ before-main.php を編集 3 ウィジェットが追加されているかみてみた

Wordpress サイドバーにプロフィールを表示。コピペで簡単!掲載方法
Wordpressでサイドバーにプロフィール【運営者情報掲載方法】を表示する方法を書いています。コピペで簡単にお持ち帰り下さい。プラグインは使いません。

https://mitemita.com/custom-post-widget/

コメント

  1. makisushi より:

    こんにちは~
    トップページのウィジェット追加、参考になります。レスポンシブでそのまま反映できるの便利ですね。

  2. 39ma(さくま)39ma より:

    makisushiさん
    こんにちは~!
    ご訪問とコメントを御寄せ頂きありがとうございます。

    >>参考になります。レスポンシブでそのまま反映

    わー、ありがとうございます。
    素直に嬉しい。。。需要があるなんて(笑
    「インデックスリスト~」が備わってるので、不要な記事かも。と思いつつ、
    二週間も寝かせた熟成記事でした(苦笑;

  3. […] 参照:Simplicity トップページ上部と下部に専用ウィジェットスペースをつくる […]

タイトルとURLをコピーしました