Simplicityを使ってトップページのみを3カラム、他を2カラムにしてレスポンス機能を残してみた

 Simplicityの3カラム化については公式でも非サポートということで、ブログ全体を3カラム化されている方は見かけたのですが、トップページをのみを3カラム化されている方がいなかったので挑戦してみました。もちろんレスポンス出来てモバイルにも対応しています💡

 Simplicityの3カラム化については次のサイトを参考にさせていただきました、貴重な情報をありがとうございますm(_ _)m

参考記事:https://thk.kanzae.net/net/wordpress/t2579/

 ちなみに上記サイトではレスポンシブする際に「左サイドバー」がメインカラムの下に来るように作られていますが、今回の実装では「display:none;」を使って画面幅1110px以下ではサイドバー自体を表示しないように設定しています。

 それでは早速やっていきましょう💡 このブログでも実装してみましたのでいろいろデザインめぐりをしてみてください^-^ノ

【追記】こちらのページにて作成した3カラムの子ページを配布しています。

Simplicityレスポンシブ3カラム子テーマの配布
 以前Simplicity2の子テーマを使って、トップページのみ3カラムにするという記事を書きました。  そこで、Simplicity2本...
 

完成形のイメージ

 と、いうわけで、早速なんですがまず先に完成形を💡 このようにトップページ(フロントページ)のみが3カラムになっていて他のページでは2カラムにすることに成功しました。

(1)トップページ

その他のページ

 完成のイメージが出来たところで作業に移ります💡

子テーマを使って3カラムを実装する。

 Simplicityは子テーマを編集することが推奨されているので今回は通常の2カラムの子テーマをダウンロードして3カラムへと変身させます。

 ここからは先程のサイトを参考にしばらく同じ工程を進ませていただきます💡

子テーマに必要なファイルをコピーする

 子テーマには必要最小限のファイルしか含まれていないので、親テーマから編集に使用するファイルをコピーしてきます。

 必要なファイルは

  • header.php
  • footer.php

 の2つです。

header.phpに追記

 header.phpの下の方に<div id=”main”>というのがあるので探してください。

 見つけましたらその下に

<div id="field">

 と記入してください。

 ちょうどこんな感じですね

function.phpに追記

 次にfunction.phpに下記のコードを書き足し左サイドバーを定義します。

// 左サイドバーウィジットを有効化
register_sidebars(1,
    array(
    'name' => '左サイドバーウイジェット',
    'id' => 'sidebar-left',
    'description' => '左サイドバーのウィジットエリアです。',
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => '</div>',
    'before_title'  => '<h3 class="widgettitle">',
    'after_title'   => '</h3>',
));

 ↓追記したところ

footer.phpに追記

 次はfooter.phpの一番上の部分に以下を追記していきます。これはトップページのみに先程定義した左サイドバーを追加するためのコードです。

</div><!-- /#field -->
 <!-- フロントページの場合のみ -->
 <?php if ( is_home() || is_front_page() ) : ?> 
 <!-- sidebar-left -->
 <aside>
 <div id="sidebar" class="side-left">
 <div id="sidebar-widget">
 <!-- ウイジェット -->
 <?php if ( is_active_sidebar( 'sidebar-left' ) ) :
 dynamic_sidebar( 'sidebar-left' );
 endif;?>
 </div>
 </div>
 </aside><!-- /#sidebar-left -->
 <?php endif; ?>

 赤色で囲った部分が追加された部分です。

 ↓下のタグで囲まれた左サイドバーはトップページのみに表示されるようになります。

<?php if ( is_home() || is_front_page() ) : ?> 

<?php endif; ?>

もう一度header.phpを開いて追記

 今度はレスポンシブに対応するようにCSSを記入していきます。

 今回はトップページと他のページでサイドバーを表示するかの分岐をphpで行っているのでheader.phpに直接書いてしまっています

<!-- フロントページの場合のみ -->
<?php if ( is_home() || is_front_page() ) : ?> 
<style>
<!--
#main {
 padding: 0 !important;
 border: none;
}
#sidebar {
 border: 1px solid #ddd;
 border-radius: 4px;
 padding-left: 10px;
 padding-right: 10px;
}
@media screen and (min-width: 1230px) {
 #header-in, #navi-in, #body-in, #footer-in {margin:0 auto;width:1080px;}
 #main {width:800px;}
 #field {float:right;max-width:530px;margin:0;}
 #sidebar {float: right;width:250px;}
 #main .side-left {float:left;width:240px;}
}
@media screen and (max-width: 1229px) {
 #main {margin-bottom:0;}
 #field {border:1px solid #ddd;border-radius:4px;padding:20px 29px;}
 #main .side-left {display:none;}
}
@media screen and (max-width: 1110px) {
 #main .side-left {display:none;}
}
@media screen and (max-width: 640px) {
 #field {padding:10px;border:none;}
}
@media screen and (max-width: 330px) {
 #field {padding:0;}
}
-->
</style>
<?php endif; ?>

 これらのCSSはheader.php内の 「</head>」と「</body>」の間あたりに記入しておけば大丈夫です💡

</head>
   #ここに記入する
</body>

まとめ

 なんとかトップページだけを3カラム、他のページを2カラムに設定することができました。

 なんだか他にもっとよいやり方があるような気がしてなりませんが^-^;今の知識ではここまでしか思いつきませんでしたm(_ _)m

 この記事が誰かのお役に立てば幸いでございます。

フォローする