WordPress
WordPressのカスタマイズでCocoonを使う案件を担当しました。
当初、デフォルトのスキンを使っていました。左にメイン、右にサイドバーが一つあるものです。
これを、クライアントさまのご依頼で、メインの左右にサイドバーを付けることとなりました。
スキンからこのような仕様がありませんでしたので、cocoonのカスタマイズに取り掛かりました。
出来上がりはこんなかんじ。1と3がsidebar、2がメインです。
手順は以下のとおりです。
1.Cocoonの子テーマをダウンロードする 2.ファイルの場所を理解する 3.functions.phpに追記する 4.sidebar-left.php / sidebar-right.phpを新規に作る 5.index.phpを親テーマからコピペしてきて、トップページのレイアウトを書く 6.cssはstyle.cssに書き足す
if ( function_exists('register_sidebar') ) { register_sidebar(array( 'name' => 'サイドバー左', //管理画面のウィジッドに出る名前 'id' => 'sidebar-1', 'description' => 'サイドバー1の説明を記入', 'class' => 'child-side1', //ソースコードに付くクラス名 'before_widget' => '<div class="widget">', //ウィジッド前に付くコード 'after_widget' => '</div>', //ウィジッド後に付くコード 'before_title' => '<h2>', //タイトル文字の大きさ 'after_title' => '</h2>', )); register_sidebar(array( 'name' => 'サイドバー2', 'id' => 'sidebar-2', 'description' => 'サイドバー2の説明を記入', 'class' => 'child-side2', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', )); }このサイドバーを出力させるためには、sidebar.phpに以下のコードを書き足します。 <?php if ( is_active_sidebar('sidebar-1') ) : ?> //sidebar-1の場合 <?php dynamic_sidebar('sidebar-1'); ?> <?php endif; ?>