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


ピックアップ記事

WordPress 独自テンプレートでよく使う関数など

2022年11月16日 web関連WordPressjQuery・javascriptphp
投稿関連 ページID 取得・表示 [php]<?php $post_id = get_the_ID ( ) ; echo $post_id; ?>[/php] リンク取得・表示 [php] <a href="<?php echo get_permalink( 99 ); ?>">リンクテキスト</a> [/php] …
「WordPress 独自テンプレートでよく使う関数など」をはてなブックマークに追加

Facebook アプリ開発 友達にアプリを紹介する機能を実装する

2012年03月19日 Facebookphp
利用中のアプリを友達に紹介してもらう機能は以下のようにすることで実装できます。 [php] <?php //友達に紹介する設定 $app_id = "YOUR_APP_ID"; $canvas_page = "YOUR_CANVAS_PAGE"; $message = "この素晴…
「Facebook アプリ開発 友達にアプリを紹介する機能を実装する」をはてなブックマークに追加

twitter公式ウィジェットの背景色をクリアにする

2011年05月26日 web関連
ブログやサイトなんかにtwitterウィジェットを使う事が多くなりましたが、ウィジェットの背景を透明にしないとサイトにマッチしないなぁという場合もあるかと思いますので、その方法を書いておきます。簡単ですが。。。(笑) theme: {    shell: {      background: 'none',  …
「twitter公式ウィジェットの背景色をクリアにする」をはてなブックマークに追加

ZenCartのパンくずリストをトップページのみ非表示にする

2012年02月11日 zencartphp
変更する箇所 includes/classes/breadcrumb.php の60行目付近 [php] } else { $trail_string .= $this->_trail[$i]['title']; } [/php] 上記のコードを以下に変更します。 [php] } else { if ($this->…
「ZenCartのパンくずリストをトップページのみ非表示にする」をはてなブックマークに追加

WordPressのREST APIを使って最新記事を取得・表示させる

2017年06月14日 WordPressphp
1.WP REST APIプラグインをインストール 管理画面から「WordPress REST API」プラグインをインストールし、有効化します。 これで http://◯◯◯.com/wp-json/wp/v2/posts にアクセスすれば、記事の情報がjson形式で表示されます。 WordPress REST API jsonを取得・表示させる [php]&l…
「WordPressのREST APIを使って最新記事を取得・表示させる」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy