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

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

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

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

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

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

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

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

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

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

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

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

作業に必要なファイル

上部・下部スペース共に使用する(書き込みをする)ファイルは以下の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(); ?>

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

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

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

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

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

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 ウィジェットが追加されているかみてみた

mitemita.com

2015.10.21

Wordpress　サイドバーにプロフィールを表示。コピペで簡単!掲載方法

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

mitemita.com

2020.11.10