2013年10月06日 web関連WordPressphp

WordPressで自作のテーマを作った場合などは、自分でウィジェットを利用可能にしない限り、ウィジェットは利用出来ません。このサイトのテーマは自作なのですが、今までウィジェットは使う機会がなかったので、未対応のままになっていました(:_;)

今回は、サイドにWordPress Popular Postsプラグインの人気記事一覧を表示させたかったので、調べてみましたよっ!ってことで、ウィジェットに対応していないWordPressでウィジェットを利用可能にする方法です。

手順は簡単です。

1.ウィジェットを有効にする

functions.php
<?php
// サイドバーウィジェット
register_sidebar(array(
     'name' => 'side-widget', //作成するウィジェットの名前(お好きな名前で)
     'before_widget' => '<div class="widddget">', //ウィジェットを囲む開始タグ
     'after_widget' => '</div>', //ウィジェットを囲む終了タグ
     'before_title' => '<h3>', //ウィジェットタイトルを囲む開始タグ
     'after_title' => '</h3>', //ウィジェットタイトルを囲む終了タグ
));

?>

ウィジェットを作成するだけなら、functions.phpに、register_sidebar(); もしくは、register_sidebars();と記述するだけで、OKみたいですが、それだとウィジェットのタイトルやウィジェットを囲むHTMLタグの設定がデフォルト(h2とliかな?)のままになります。今回はHTMLタグも変えたかったので、before_widgetなどの設定をしています。

2.ウィジェットを表示させたい箇所に以下を記述

sidebar.php
<?php dynamic_sidebar('side-widget'); //functions.phpに設定した名前 ?>

functions.phpでregister_sidebar(); もしくは、register_sidebars();と設定しているだけなら、引数無しのdynamic_sidebar();でOKです。

むむむ・・・

本当に簡単だったので、ついでに複数のウィジェットの設定方法もまとめておきます。

複数のウィジェットを作成する場合

ウィジェットを左右のサイドバーで使い分けるなど、複数のウィジェットが必要な場合も上で説明したウィジェット設置時のfunctions.phpの内容を必要な数だけ追加し、呼び出したい箇所にdynamic_sidebarでnameかidを指定して呼び出してやれば、可能です。簡単ですね。

1.ウィジェットを有効にする

functions.php
register_sidebarで2つのウィジェットを作成
<?php
register_sidebar();
register_sidebar();
?>
register_sidebarsで2つのウィジェットを作成
<?php
register_sidebars(2);
?>
2つのウィジェット(widget1,widget2)を作成
<?php
register_sidebars(2, array('name'=>'widget%d'));
?>

上記どのパターンでも2つのウィジェットが追加されます。name,idを指定しない場合は、サイドバー1,サイドバー2みたいな名前で追加されます。functions.php内で上から書かれている順に番号が振られていく感じみたいです。2つ以上の場合は数字を変えるだけで作成可能です。

ここを見るとregister_sidebarsを使うほうが一般的みたいです。

2.ウィジェットを表示させたい箇所に以下を記述

複数のウィジェットの作成が完了したら、表示したい箇所に呼び出します。

sidebar.php
functions.phpでウィジェットのnameもidも指定せずに設定した場合
サイドバー1
<?php dynamic_sidebar(1); ?>
サイドバー2
<?php dynamic_sidebar(2); ?>
sidebar.php
functions.phpでnameかidを指定した場合
サイドバー1
<?php dynamic_sidebar('widget1'); ?>
サイドバー2
<?php dynamic_sidebar('widget2'); ?>

ちなみに、register_sidebardynamic_sidebarといった具合に、sidebarという名前になっているので、なんとなくサイドに置くのか。。って感じですが、ウィジェットはフッターやコンテンツなど好きな箇所に表示することが可能です。

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

FireFoxのメニューバーを表示させる

2011年06月04日 web関連
Windowsで、FireFoxのメニューバーを非表示にしてしまうと、再表示させる方法が分かりづらいのでメモ。 解決方法 操作は簡単で、FireFoxを表示中に、「ALT」を押す! 以上です (´ー`) Macの場合は各アプリケーションのメニューは画面の一番上に表示されているので、メニューバーの表示、非表示はいつでも簡単に切り替えられます。…
「FireFoxのメニューバーを表示させる」をはてなブックマークに追加

Twitter API を使わずにプロフィール画像を取得する

2011年07月29日 web関連twitter API
Twitter APIを使っていると、プロフィール画像の取得だけで、さくさく利用限度が減って行きます。 公式のAPIを使わず、もっと簡単に画像を取得出来る方法があるようなので、ご紹介。 …
「Twitter API を使わずにプロフィール画像を取得する」をはてなブックマークに追加

Dreamweaverのソース検索で正規表現を使う

2012年01月23日 web関連
今回は、wordpressからエクスポートした記事のxmlデータを、他のwordpressに入れる際に、xmlにカテゴリやタグが入っていると、新しいwordpressにもカテゴリが全部追加されて、不要なカテゴリが増えてしまったので、それを防ぐために、インポート前のxmlデータからカテゴリやタグにあたる箇所を削除してから、インポートするためにdreamweaverで正規表現を使いました。 Word…
「Dreamweaverのソース検索で正規表現を使う」をはてなブックマークに追加

youtubeで、自動翻訳の字幕を日本語に固定する方法

2021年04月30日 web関連youtube
youtubeで海外のチュートリアル動画などを見ていて、動画が変わるたびに翻訳の設定を、自動翻訳、日本語と設定することが手間だったので、自動翻訳の言語を日本語に固定する方法がないか調べました。 Chromeの拡張機能をつかい、Chrome上でUserSriptを実行させて、Youtubeを開いた時に、スクリプトが自動で、自動翻訳字幕の日本語を選択するといった感じになります。 Windows 1…
「youtubeで、自動翻訳の字幕を日本語に固定する方法」をはてなブックマークに追加

ページIDからリンクを設定

2011年11月28日 WordPress
[php] <a href="<?php echo get_permalink('75'); ?>">お問い合わせ</a> [/php]
「ページIDからリンクを設定」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy