自サイトの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記事を書く時間の方が長いのではないか？と。
