カスタムフィールドを追加し固定ページ一覧情報と一緒に取得

トップページに固定ページで指定した色で固定ページのメニューを作りたい要望があり…

1.カスタムフィールドで色情報を追記
トップページを親に持つ固定ページで「表示オプション」→□カスタムフィールドにチェックを付けて準備し、名前:colorで値をorangeやyellowやgreenなどの色名で登録

2.CSSで各色のスタイルを準備
orangeやyellowやgreenなどで表示するメニュー枠などのデザインをCSSファイルに準備

3.固定ページ一覧情報とカスタムフィールド値も取得し表示
get_pagesという関数がWordPressにあるので、利用して固定ページの情報を取得
固定ページで登録した順序どおりの表示にするために’sort_column’ => ‘menu_order’のパラメーターを利用して下記処理で無事に取得できました。

<?php
$pages = get_pages( array(‘parent’ => トップページのID,’sort_column’ => ‘menu_order’));

foreach ( $pages as $page ) {

//各固定ページからカスタムフィールドの色情報取得
$color = get_post_meta($page->ID, ‘color’, true);

//固定ページ内容確認
print ” ID:” . $page->ID; //固定ページ/投稿 ID (整数)
print ” post_title:” . $page->post_title; //タイトル (文字列)
print ” post_parent:” . $page->post_parent;  //parent ID (整数)
print ” guid:” . $page->guid;  //URL
print ” menu_order:” . $page->menu_order;  // (整数)
print ” color:” . $color;  //色情報取得
print “<br>”;
}
?>

あとは、$page->post_titleに$page->guidへのリンクを付けて表示しdivなどのブロック要素で囲んでクラス名を$colorを利用して整形して表示すれば何とかなりそうで一安心♪

WordPressのフッターにウィジェットを追加

オリジナルのWordPressテンプレートデザインを作成した際に、たまにフッター部に問合せ先などの編集できたら便利な表示内容があるので、ウィジェットを追加する時のメモ

1.ウィジェット機能を有効にする
テンプレートフォルダ内のfunctions.phpに下記記述を追加する

// フッターウィジェットの追加
register_sidebar(array(
‘name’ => ‘フッター’,
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<span>’,
‘after_title’ => ‘</span>’,
));

2.WordPressの管理者ページよりウィジェット内容を登録する
「外観」→「ウィジェット」でフッターが表示されるので、「テキスト」や「固定ページ」をドラッグ&ドロップして追加して、内容を設定する

3.フッター部に表示する
テンプレートのフッター(例えば、footer.php)に下記記述を追加する

<?php dynamic_sidebar(‘フッター’); ?>

※注意点
‘before_widget’ と ‘after_widget’ はウィジェット表示のマークアップを指定、’before_title’ と ‘after_title’ はウィジェット管理画面で入力したタイトルをマークアップします。「div」とCSSの組み合わせや「style」で文字色や大きさを変えたり、文字やアクセント画像を挿入することができます。

テーマによっては、<li>の先頭に付く黒丸のような装飾や、余計なマークアップが入ったりします。元のCSSや表示を確認しながら、適宜’before_widget’などを変更しましょう!