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


ピックアップ記事

IE6で透過pngを表示させる方法のメモ

2012年02月09日 web関連
最近は透過pngを上手に使ったサイトも増えてきたので、IE6を気にせずに、透過pngを普通に使って、サイトを作りたいと思ってたのですが、IE6の使用率がゼロでない以上は、やっぱり気になってしまうので、お手軽な方法を調べていたら、詳しくまとめられているサイトを見つけたので、メモしておきます。 個人的に特に気になったのは、「ie7.js」と「DD_belatedPNG.js」です。他の方法は既知のも…
「IE6で透過pngを表示させる方法のメモ」をはてなブックマークに追加

レスポンシブ対応 画像メニューをテキスト表示に切り替える

2014年11月15日 web関連HTML5・CSS3
レスポンシブなサイトを作るときに、大きな画面では画像メニュー、スマホなどのサイズでは、テキストメニューにして、メニューボタンに格納したい場合など、画像メニューからテキストメニューにCSSで表示切り替えする方法。 cssの:before attr属性で解決 html [php]<ul id="nav"> <li><a data-tex…
「レスポンシブ対応 画像メニューをテキスト表示に切り替える」をはてなブックマークに追加

WordPress ソースコードを整形する SyntaxHighlighter

2011年05月27日 WordPress
SyntaxHighlighter Evolved を入れてみました。WordPress バージョン3.xx(調べるのメンドイ)ですが、ん~~すんなり動きませんでした。 デフォルトでは、コードを表示するにはしてくれるのですが、ソースをコピーなどのボタンが表示されない状態でした。 テンプレートの関係などあるのかなと思い、複数のテンプレートでも試しましたが、変化なしでした。 いろいろ調べました&…
「WordPress ソースコードを整形する SyntaxHighlighter」をはてなブックマークに追加

WordPress のWP-DBManager プラグインで自動的にデータベースのバックアップ

2012年01月28日 WordPress
初期設定 まずは、WP-DBManagerをダウンロードし、プラグインフォルダに入れたら、管理画面上から有効化します。 すると管理画面のメニューに「Database」というメニューが追加されるので、その中の「Backup DB」を開きます。 そこに英語で「.htaccess」関係の警告が出てると思うので、指示の通りの場所にある「htaccess.txt」を「.htaccess」にリネームして…
「WordPress のWP-DBManager プラグインで自動的にデータベースのバックアップ」をはてなブックマークに追加

jQuery Ratyでレーティング(評価)表示

2013年10月21日 WordPressjQuery・javascriptphp
jQuery Ratyでレーティング(評価)表示
ホームページやブログの記事なんかにスター評価を表示させたい場合は、jQuery Ratyで簡単に設定出来ます。 jQuery Raty - A Star Rating Plugin ダウンロード まずは、必要なファイルを以下からダウンロードします。ダウンロードしたファイルを解凍して、jquery.raty.min.jsとimgフォルダ(星の画像)を任意の場所にアップロー…
「jQuery Ratyでレーティング(評価)表示」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy