WordPressのカスタマイズでCocoonを使う案件を担当しました。 当初、デフォルトのスキンを使っていました。左にメイン、右にサイドバーが一つあるものです。 これを、クライアントさまのご依頼で、メインの左右にサイドバーを付けることとなりました。 スキンからこのような仕様がありませんでしたので、cocoonのカスタマイズに取り掛かりました。 出来上がりはこんなかんじ。１と３がsidebar、２がメインです。 手順は以下のとおりです。

１．Cocoonの子テーマをダウンロードする ２．ファイルの場所を理解する ３．functions.phpに追記する ４．sidebar-left.php / sidebar-right.phpを新規に作る ５．index.phpを親テーマからコピペしてきて、トップページのレイアウトを書く ６．cssはstyle.cssに書き足す

   

１．カスタマイズは子テーマで

カスタマイズは子テーマでおこないます。 子テーマとは、親テーマのデザインや機能を引き継ぎながらもカスタマイズのできるテーマです。 子テーマを使う理由としては、 １．親テーマのアップデートで上書きされない ２．ソースコードが管理しやすい などの理由があります。 今回はCocoonでしたので、こちらからダウンロードをしました。 https://wp-cocoon.com/downloads/   ２．子テーマのファイルの整理のされ方を理解する これについては、こちらのサイトが詳しかったです。 https://wp-cocoon.com/custum-template-files/  

3.functions.phpに書き足す

書き足すコードはこちら

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; ?>

４．sidebar-left.php / sidebar-right.phpを新規に作る

今回はサイドバーを２つ作りますので、 id:sidebar-1のsidebar-left.php id:sidebar-2のsidebar-right.php としました。 sidebar-2の場合には、上記のコードをsidebar-2とすればいいですね。

５．index.phpを親テーマからコピペしてきて、トップページのレイアウトを書く

index.phpは親テーマからコピペしました。 １にsidebar-left.php、３にsidebar-right.phpを置きます。 get_sidebarの書き方は、よいですよね。 <div class="sidebar-one"> <?php get_sidebar('left'); ?> </div> サイドバーの中に何を入れるかは、[管理画面]-[外観]-[ウィジッド]から足していくことができます。

６．cssはstyle.cssに書き足す

cssはstyle.cssを子テーマにあるものに入力して、親テーマの上書きをします。     以上です。 私もググりながらやったのですが、次回また悩むと思い、書き留めておきます。 【参考にさせていただきました】 https://blanche-toile.com/web/wordpress-register-sidebar