自サイトのWordpressテンプレート
今までは有料のフレームワーク的なテンプレートを利用してきたが、機能が100あるとするならそのうちの10%も使っていないし、現状BLOGサイトになっているので久々にデフォルトテンプレートのカスタマイズでもしてみようと思いついた、2013年の暑すぎるお盆休み。
先日Wordpress3.6にUPされ付属する新テーマ ”Twenty Thirteen”
これをカスタマイズしてみようと思っていたのだが、中途半端な派手さと日本語のフォントだと h1のサイズがあまりにも大きい、ベースのフォントサイズなどを調整すれば良いのだろうけど、全体をチェックする必要もありちょっとパス!
フリーのテンプレートをカスタムしても・・とも、考えたが
せっかくなので入ってる Twentyシリーズから選ぶ。
条件として、レスポンシブなテンプレートを使いたいので”11″ “12” “13”の中から選ぶことにしたが、先に書いたように”13”は、今回なし。
CSSで可能なデザイン的部分は今後暇を見つけてすすめるとして、
個人的にとてもスッキリ見えるTwenty Twelve を今回使ってみることにした。
変更したいところを上げるとキリがないので、一般的にあってTwelveにないところ
サイトの下部フッターといわれるところにウィジェットが無い。
ここはなんとか付け加えておかなければ・・
固定したモノであればPHPに直接HTMLを書き込めばいいのだが、せっかくWordpressつかっているのだから使いたい。
このお盆にやって今回更新かけたのは、次の3点
- スマホなどのデバイスで見た時のメニューのボタンがとってつけた送信ボタンみたいなので、すこしそれらしく。(メニュー全体の調整は今後)
- 右のカラムエリアが250pxしかないので、300px程度に拡張
- フッターにウィジェットを追加 ついでにworpressクレジットをCopyright表示に変更
テスト環境では、プラグインでスライダーを入れてみたが、アイキャッチとの兼ね合いで調整中。
目次
下準備として子テーマ twentytwelve-child の準備
style.css
空のfunctions.php
footer.phpをTwntyTwelveからコピー
では、style.css
/* Theme Name: Twenty Twelve Child Theme at Yoshiara Theme URI: https://beam.co.jp/themes/twentytwelve-child Author: Mitsuru Yoshihara Author URI: https://beam.co.jp/ Description: Child theme for the Twenty Twelve theme for WordPress Template: twentytwelve Version: 0.0.1 */ @import url('../twentytwelve/style.css');
1. 携帯デバイスで見た時のメニューがちっちゃいので少し変更
インラインブロックから inline-block block へ PCなどで見た時には元に戻す。
style.css 追加
@media screen and (min-width: 600px) { /* 300px*/ .widget-area { float: right; width: 31.25%; } /* モバイルメニュー元にもどす*/ .menu-toggle { display: none; } }
2. 右のカラムを300pxへ変更
style.css の上記 @media screen and (min-width: 600px) の中へ追加
/* 300px*/ .widget-area { float: right; width: 31.25%; }
3. フッターにウィジェットを追加 ついでにworpressクレジットをCopyright表示に変更
functions.phpでウィジェット関数を消して新しく関数を追加
これについては、ネットで検索をしていてとてもナイスなサイトを発見した。
有難くまるっとコピーさせていただいた! インターネットって素晴らしい! 感謝しています。
もやし工房様
WordPress Twenty Twelveの「子テーマ」でフッター部分にウィジェットエリアを追加する方法
http://www.moyashi-koubou.com/blog/wordpress_twentytwelve_footer_widget/
ここが無ければこんな短時間に終わったかどうか??
関数が出来たのでウィジェットを作る部分と呼び出す部分
footer-widget.phpの作成とfooter.phpの修正
footer-widget.phpこれまた先程のもやし工房様のWebからのリンクで
1000old.com様
【WordPress】「Twenty Twelve」のフッター部分にウィジェットエリアを追加する方法
http://1000old.com/oss/footer-widget-area/
なんと素晴らしい!!!(笑)
コードを書く時間もあれこれ考える時間も節約。
表示するための修正ぐらいは、やらなきゃ。ということで
<!--FooterWidget--> <?php get_footer( 'widget' ); ?> <!--/FooterWidget--> <!-- copyright --> Copyright © <a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?> homeへ"><?php bloginfo('name'); ?></a> <?php echo date('Y'); ?> All Rights Reserved. <!-- /copyright -->
これぐらいは、自分でやらないとバチがあたりそう。
以上今回のカスタマイズの記録として残しておきます。
CSSでさわりたいところや、他のPHPで修正したいところなど気付いた場所がまだまだある。
少しずつ手を加えたい。
しかしいつもながら、やはりBLOG記事を書く時間の方が長いのではないか?と。