WordPress Twenty Twelveのカスタマイズ3点

Google+ Pinterest LinkedIn Tumblr +

TewntyTwelve screenshot自サイトのWordpressテンプレート

今までは有料のフレームワーク的なテンプレートを利用してきたが、機能が100あるとするならそのうちの10%も使っていないし、現状BLOGサイトになっているので久々にデフォルトテンプレートのカスタマイズでもしてみようと思いついた、2013年の暑すぎるお盆休み。

先日Wordpress3.6にUPされ付属する新テーマ ”Twenty Thirteen” 

これをカスタマイズしてみようと思っていたのだが、中途半端な派手さと日本語のフォントだと h1のサイズがあまりにも大きい、ベースのフォントサイズなどを調整すれば良いのだろうけど、全体をチェックする必要もありちょっとパス!

フリーのテンプレートをカスタムしても・・とも、考えたが
せっかくなので入ってる Twentyシリーズから選ぶ。

条件として、レスポンシブなテンプレートを使いたいので”11″  “12”  “13”の中から選ぶことにしたが、先に書いたように”13”は、今回なし。

CSSで可能なデザイン的部分は今後暇を見つけてすすめるとして、

個人的にとてもスッキリ見えるTwenty Twelve を今回使ってみることにした。

変更したいところを上げるとキリがないので、一般的にあってTwelveにないところ

サイトの下部フッターといわれるところにウィジェットが無い。

ここはなんとか付け加えておかなければ・・

固定したモノであればPHPに直接HTMLを書き込めばいいのだが、せっかくWordpressつかっているのだから使いたい。

このお盆にやって今回更新かけたのは、次の3点

  1. スマホなどのデバイスで見た時のメニューのボタンがとってつけた送信ボタンみたいなので、すこしそれらしく。(メニュー全体の調整は今後)
  2. 右のカラムエリアが250pxしかないので、300px程度に拡張
  3. フッターにウィジェットを追加 ついでに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/

なんと素晴らしい!!!(笑)

コードを書く時間もあれこれ考える時間も節約。

表示するための修正ぐらいは、やらなきゃ。ということで

フッター (footer.php) のファイルに追加と修正をする。

<!--FooterWidget-->

<?php get_footer( 'widget' ); ?>

<!--/FooterWidget-->

<!-- copyright -->

Copyright&nbsp;&copy;&nbsp;&nbsp;<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>&nbsp;homeへ"><?php bloginfo('name'); ?></a> &nbsp;&nbsp;<?php echo date('Y'); ?> All Rights Reserved.

<!-- /copyright -->

 

これぐらいは、自分でやらないとバチがあたりそう。

以上今回のカスタマイズの記録として残しておきます。

CSSでさわりたいところや、他のPHPで修正したいところなど気付いた場所がまだまだある。
少しずつ手を加えたい。

しかしいつもながら、やはりBLOG記事を書く時間の方が長いのではないか?と。

Share.

Comments are closed.