HCDコンサルティング(旧・中川勉社会保険労務士事務所FPウェブシュフ)のブログ

個別記事にサイドバーを表示-WordPress Twenty Elevenカスタマイズ


twentyelevenは、レスポンシブでとても使いやすいテーマなのですが、そのままでは個別記事ページにサイドバーが表示されません。

少々苦労してサイドバーを表示させてみましたが、終わってみればとても簡単に出来ることがわかりました。

style.css

まずstyle.cssをちょっと書き換えます。

エディタの検索機能を使って、以下のような部分を探します。デフォルトのまま何もいじってなければ100行目前後のところにあります。

/* Singular */
.singular #primary {
    margin: 0;
}
.singular #content,
.left-sidebar.singular #content {
    margin: 0 7.6%;
    position: relative;
    width: auto;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
    margin: 0 auto;
    width: 68.9%;
}

/* Attachments */

そして、/* Singular /と/ Attachments */の間を以下のように書き換えます。

/* Singular */
.singular #primary {
    float: left;
    margin: 0 -26.4% 0 0;
    width: 100%;
}
.singular #content,
.left-sidebar.singular #content {
    margin: 0 34% 0 2%;
    width: 64%;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
    margin: 0 auto;
    width: 100%;
}

/* Attachments */

single.php

次に、single.phpをいじります。デフォルトのままいじってなければ、末尾は次のようになっています。

<?php get_footer(); ?>

ここに、少し書き足します。

<?php get_sidebar(); ?>
<?php get_footer(); ?>

style.cssとsingle.phpをFTPソフトでアップロードすれば、サイドバーが出現するはずです。こんな感じになります。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: