サイトマップ（全ページ一覧）

赤ちゃんに絵本はまだ早い？
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

WPテーマSelaに記事下ウィジェットエリアを追加する手順

 

ちびこママです！
icon-twitter Chibiko_mama

当サイトは、以前ワードプレスの無料テーマ「Sela」を使用していました。

あれこれカスタマイズしたので、本記事のような備忘録を残しています。

 

「Sela」のウィジェットエリアは、サイドバー、フロントページ×３、フッター×３の計７か所あります。

比較的多い方だと思うのですが、投稿ページ（個別記事）の下にもウィジェットが欲しくなったので、追加してみました。

※現在はCocoonというテーマに変更しております。

 

目次

1 functions.phpにウィジェットエリアを追加するためのコードを追記する
2 single.phpの子テーマを作り、ウィジェットを表示させたい部分にコードを追記する
3 tableを使えばダブルレクタングルの広告も挿入できる

functions.phpにウィジェットエリアを追加するためのコードを追記する

ウィジェットエリアを追加する方法自体は既出の情報なので、Selaで追加する場合についてのみ簡潔に書いていきます。

ちなみに、私が参考にさせていただいたサイトはこちら。

☞WordPressのウィジットエリアを追加する方法 icon-external-link │Web’s Notes

 

まずはfunctions.phpを開き、ウィジェットエリアに関する記述部分を探します。

 icon-exclamation-triangle 変更を加える前に必ずバックアップを取るか、functions.phpの記述を全てメモ帳などにコピペしてください。また、functions.phpは非常に重要なファイルで、記述に誤りがあるとサイトが表示できなくなる恐れがあります。十分にご注意ください。

ロリポップの場合はこのような画面です。ロリポップユーザー専用ページからFTPに入れます。

ロリポップについてはこちら
☞安心してデータを預けられるレンタルサーバー。
月額100円（税抜）～容量最大400GBでWordPress簡単インストールなど
多彩な機能がついて、バックアップ機能も完備！

赤枠で囲った部分がウィジェットエリアに関する記述です。
枠下を見ると、似たような記述があるのが分かると思います。要はこの部分をコピーし、nameとidを書き換えて続けて追記すればOKです。

nameは何でもいいのですが、記事下に作りたかったので「Under Article Widget Area」としました。自分が分かりやすい名前で良いと思います。Selaはウィジェットエリアが７つあるので、idは「sidebar-8」になります。更に追加する場合は、「sidebar-9」、「sidebar-10」・・・という感じでOKです。

画面の青い部分が追記した場所です。実際に追記した内容は以下のとおり。

register_sidebar( array( register_sidebar( array(
 'name'          => __( 'Under Article Widget Area', 'sela' ),
 'id'            => 'sidebar-8',
 'before_widget' => '<aside id="%1$s" class="widget %2$s">',
 'after_widget'  => '</aside>',
 'before_title'  => '<h3 class="widget-title">',
 'after_title'   => '</h3>',
 ) );

これで保存するをクリックします。

 

※繰り返しになりますが、functions.phpに変更を加える前には必ずバックアップを！！私はバックアップ用のプラグインの他、メモ帳にコピペ、「保存する」ボタンの隣にある「ダウンロード」ボタンでファイルをローカルに保存してから変更を加えるようにしています。

ワードプレスの管理画面にログインし、外観→ウィジェットをクリックし、「Under Article Widget Area」というウィジェットが追加されていれば、functions.phpでの作業は完了です。

single.phpの子テーマを作り、ウィジェットを表示させたい部分にコードを追記する

カスタマイズするときには、子テーマと言うものを作り、子テーマを編集するようにします。テーマの更新があると、親テーマを直接編集していると上書きされてしまうためです。

☞子テーマの作り方はこちら
[rich_link link=”https://www.akaeho.net/wordpress-sela-child-theme/”]

ロリポップFTPでchildフォルダ（子テーマのフォルダ）内に「single.php」というファイルを新規作成します。次に、selaフォルダ（親テーマのフォルダ）内にある「single.php」の記述をchildフォルダ内のsingle.phpにコピペします。

ワードプレスの管理画面に入り、外観→テーマの編集をクリックすると、「個別投稿（single.php）」が追加されます。

個別投稿をクリックし、「<?php sela_post_nav(); ?>」と「<?php<?php // If comments are open･･･?>」の間に次の１行を追記します。（’Under Article Widget Area’の部分は、自分でつけたウィジェットエリアの名前を入れます。）

<?php dynamic_sidebar('Under Article Widget Area'); ?>

あとは実際にウィジェットに何か入れてみて、無事に表示されていれば成功です。

今回は記事下に追加する方法でしたが、同じ要領でヘッダー下など、他の場所にも追加できます。

tableを使えばダブルレクタングルで広告も挿入できる

当サイトはGoogle AdSenseを利用しているのですが、アドセンスと言えばやっぱり記事下にダブルレクタングルで広告を入れたいですよね。

ウィジェットエリアを二つ作って横並びにするという方法もあるようですが、私には難易度が高いので、テーブルを使ってダブルレクタングルで広告を挿入してみました。

テキストウィジェットに以下のように入力すると、このような感じになります。

<table>
<tbody>
<tr>
<td>広告コード１</td>
<td>広告コード２</td>
</tr>
</tbody>
</table>

ビジュアルモードとテキストモードがありますが、必ず右側の「テキスト」タブをクリックして入力してください。ビジュアルモードに上記を入れてしますと、この文字列がそのままウィジェットに表示されてしまいます(笑)

ちなみに、この方法でダブルレクタングルで広告を設置すると、スマホで見た時に表示がおかしくなっちゃいます。そこで、「ウィジェットのロジック」というプラグインを使い、スマホでは非表示になるよう条件分岐しています。

「ウィジェットのロジック」の使い方については詳しい解説サイトが複数あるので、ここでの説明は割愛します。余裕があれば私も追々記事にしたいと思います。

以上、WPテーマSelaに記事下ウィジェットエリアを追加する手順の備忘録でした。



ホーム
トップ