無料WordPressテーマSimplicityにウィジェットエリア追加

無料WordPressテーマSimplicityにウィジェットエリア追加

この記事を読むのに必要な時間は約 6 分です。

Simplicityの魅力と言えば、終始シンプルな部分にあります。
しかし、情報商材アフィリエイトなんかで使いたい場合、
「ヘッダーの下に横長のメルマガ募集フォームなどを設置したい」
「トップページのみメインカラムの新着記事の上下にうだうだ追加したい」
といったゴテゴテさせたい用途では役不足な感があります。

 

 

どうも、さっとです。

 

まあ、そもそもSimplicityはそんな用途で作られていないという話もありますね。

 

子テーマに対して直に書き込むのも良いけど…

メルマガフォームや広告などを直に子テーマに書き込むのも良いですが、広告の張替や別のメルマガフォームに変更するその都度、書き換えるとなると少し気が引ける感じがあります。

 

…個人的な見解ですけどね。

 

やっぱりウィジェットなどで気軽に管理出来た方が簡単(なイメージ)ですし、何より他で使いまわしが効くので便利だと感じます。

 

そこでウィジェットエリアを追加しようと考えました。

 

お約束ですが、書き損じて最悪ブログが表示されなくなっても自力で直せない人は、さらわないのが無難です。

 

子テーマを編集する

新しいビットマップ イメージ

ではいじり倒しますよ。

 

子テーマのスタイルシート(style.css)を開き、最後部に以下のコードを追加。
.top_main_widget {
 background-color:#eee;
 padding:10px;
 margin-bottom:10px;
}

こちらはトップページのメインカラム上部に表示されるウィジェットのスタイルです。
新着記事一覧の上側ですね。

 

.top_under_widget {
 padding:10px;
 margin-bottom:10px;
}

こちらはトップページのメインカラム下部に表示されるスタイル。
新着記事の下側ですね。

 

.top_header_widget {
 background-color:#eee;
 padding:10px;
 margin-bottom:10px;
}

ヘッダー下部(トップメニュー下)に表示されるウィジェットエリアのスタイル。
この辺りは自分の好きなようにすれば良いですね。

 

追記したらファイルを更新ボタンを押して次に行きますよ。

 

テーマのための関数(functions.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>',
 'after_title' => '</h3>',
 'name' => 'トップメインカラム上',
 'id' => 'top_main_widget'
 ));
}

if (function_exists('register_sidebar')){
 register_sidebar(array(
 'before_widget' => '<div class="top_under_widget" id="%1$s">'."n",
 'after_widget' => '</div>'."n",
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 'name' => 'トップメインカラム下',
 'id' => 'top_under_widget'
 ));
}

トップページメインカラムに表示するウィジェットエリアですね。

 

if (function_exists('register_sidebar')){
 register_sidebar(array(
 'before_widget' => '<div class="top_header_widget" id="%1$s">'."n",
 'after_widget' => '</div>'."n",
 'before_title' => '<h2>',
 'after_title' => '</h2>',
 'name' => 'ヘッダー下',
 'id' => 'top_header_widget'
 ));
}

こちらがヘッダー下のウィジェットエリア。

 

もちろんファイルの更新ボタンを押して更新をかけないとダメですよ。

 

投稿ページ(home.php)を編集する
子テーマにはhome.phpが含まれないので、親テーマのものを子テーマのディレクトリにコピーしておきます。
<?php //トップページ用 ?>
<?php get_header(); ?>

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

<?php get_template_part('list') ?>

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

<?php get_footer(); ?>

赤い所が追加する部分ですね。
ここではトップページメインカラムに追加されるウィジェットエリアを記載しました。

くどい様ですが、ファイルを更新ボタンを押しますよ。

before-main.phpを編集。
<?php
//メインカラムの手前に何かを挿入したいときは、このテンプレートを編集
//例えば、3カラムの左サイドバーなどをカスタマイズで作りたいときなどに利用します。

dynamic_sidebar('top_header_widget');

?>

赤い所を追加。
これはヘッダー下ですね。

ああ、ファイルの更新な。

 

ウィジェットを追加

ウィジェット管理ページを見て見ましょう。

新しいビットマップ イメージ

赤枠のウィジェットエリアが表示されていたら成功ですね、ええ。

後は好きなようにウィジェットを追加すればOKです。

 

 

新しいビットマップ イメージ

Simplicityのシンプルな外観を台無しにする感じですね(笑
3カラム化の後に行ったので、説明が足りてないものがあるかもですが、ご容赦を。

 

追記:
ウィジェット管理画面見て見たら、インデックスリストトップとか最初から追加できるのな。
好きな所にウィジェットエリアを作るカスタマイズ方法一例と考えて頂ければ(笑

 

Wordpressカテゴリの最新記事