2014/08/01WordPressには、テーマの管理画面からサイドメニューなどのウィジェットを操作できる機能があります。HTMLやPHPなどWPソースを調整できない方には、ブラウザを通して管理画面からある程度ウィジェットをカスタマイズできるので便利な機能です。そこから自動生成される各々のウィジェットのHTMLコードは、自由にカスタマイズするには都合が悪く、私の場合はその機能を停止していました。ここで、Webの世界に入ってある程度CSSでのレイアウト力も身に付きましたし、今一度ウィジェット機能の仕様を見直してみて、活用できないか試してみます。ウィジェット機能を有効にするウィジェット機能が無効の場合、管理画面の「外観」⇒「ウィジェット」にアクセスすると「ウィジェットは使用できません」このメッセージが表示されます。有効にするためには、functions.phpなどに以下を書き込みます。if(function_exists('register_sidebar')){register_sidebar();}この状態で管理画面にアクセスすると、ウィジェット機能を利用することができます。ウィジェットを表示するウィジェット機能を有効にするだけでは、ウィジェットは表示されません。テンプレートの表示する個所に以下を書き込みます。?>通常はsidebar.phpなどサイドメニューに設置しますね。すると、管理画面で設定したウィジェットのHTMLコードが出力されます。コードをカスタマイズする冒頭でもふれたように、デフォルトのコードは扱いづらく、思うようなデザインに仕上げるのは難しいです。検索やカテゴリなど各ウィジェットはliタグで囲われており、それぞれの要素にはidやclassが振られていないので、CSSで指定するには限りもあります。そこで、以下のようにして、機能を有効にする際にタグをカスタマイズします。各ウィジェットはデフォルトのliタグではなくdivタグで囲われるようになります。タイトルがデフォルトでh2タグなのが、h3タグになります。divタグのclassにwidgetを設定します。「%2$s」とすることで、検索ウィジェットには「widget_search」、カテゴリウィジェットには「widget_category」などのクラスが振られます。閉じタグに「n」を挿入することで、ソースをほどよいところで改行して見やすくします。ここまでできれば、CSSを駆使して好きなようにレイアウトできそうですね。私ももう少しカスタマイズして、ウィジェット機能をうまく活用したいと思います。WPに限らず、個人でフレームワークやライブラリなどを何でもかんでもカスタマイズしたい場合、本来コストを削減できるどころか、スクラッチで組むよりもコストが大きくなることがあります。技術力のある人こそ、コアな部分に手を入れることで力を披露するのではなく、そのツールのルールの範囲内で少ないコストで最大のパフォーマンスを発揮することであってほしいと願うこの頃です。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。