twentyfifteenの子テーマを作る　フォント指定と固定メニュー

先日WordPressのバージョンが4.1になったのに伴い、デフォルトテーマがtwentyfifteenになりました。このblogではデフォルトテーマを使いたいなと思うので、twentyfifteenでの子テーマを作ろうと思います。

今現在は、twentyfourteenの子テーマを使って色々カスタマイズしていますので同じものをtwentyfifteenでというのは、簡単にはいかないと思いますので少しずつ進めます。

twentyfifteenの子テーマを準備する

何はともあれ、twentyfifteenでの子テーマを作っていく入れ物を準備します。新しく作る子テーマは　twentyfifteen-ryus　というものにします。

WordPress子テーマの作り方

を参照します。

wp-contents\themes\ に　twentyfifteen-ryus　というフォルダを作ります。そこに空のファイルstyle.cssを作ります。そのファイルを開いて、

/*
Theme Name: Twenty Fifteen Ryus
Template: twentyfifteen
*/

@import url('../twentyfifteen/style.css');

このように記述して保存します。この時点でダッシュボード　外観＞テーマ　を見ると

新しいテーマ　Twenty Fifteen Ryus が追加されているので、有効化してみます。

twentyfifteenと全く同じ状態で表示されました。ここから色々カスタマイズしていきます。

フォントを変更する

今のblog詳細画面

twentyfifteenでのblog詳細画面

と、ぱっと見て違うなと思うのは基本的なフォントです。twentyfifteenからNotoフォントが採用されたので日本語がいい感じ、と前回のblogで書いたのですが勘違いしていたようでした(^_^;。この辺のフォントは Noto Serif　で指定されていますが、この日本語フォントはどうやら存在しないようです。ですので Noto Serif　と　Noto Sans で指定してあるところを全て Noto Sans Japanese にしたいと思います。

新しく作った子テーマ　twentyfifteen-ryus の　style.css　を開いて、

@import url('../twentyfifteen/style.css');
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: "Noto Sans Japanese", sans-serif;
}

このようにしてみました。既にあった　@import行の下に Noto Sans Japanese　を使うためのCSSを読み込み、一つ一つ指定しようと思ったのですが大変だったので(^_^;、全てのフォントの指定を　Noto Sans Japanese　にしてしまいます。これで表示すると、

このように全体的に　Noto Sans Japanese　になりました(^^)/。

しかし、もしかすると今のblogのフォント表示の方がなじみ深い気もするので後になってからまた元のstyleと同じ指定にしちゃうかもしれません(^_^;。その場合は

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}

今と同じこんな指定にして、

こんな表示にするかもです。フォントはイメージを大きく左右するので慎重に考えたいと思います。

固定メニューが表示されなくなっちゃった！？

今はこのように　about us お問い合わせ 過去1ヶ月の投稿 読まれた順表示　が上部に表示されています。twentyfifteenに切り替えるとこれが、

こんな感じにトップ付近にもないし、ページ全体を見ても表示されていません。

twentyfourteenのダッシュボード 外観＞メニュー　を見ると、

トップメインメニュー というところにチェックが入っています。

twentyfifteenでは

トップメインメニュー　というものが無くなり、メインメニューというものがあります。

とりあえずここにチェックを入れて保存します。

すると左ブロックに今まで上部に表示されていたメニューが表示されました。うーん、場所はここでない方がいいかなと思うんですが上部に表示するにはカスタマイズが必要そうですね。これはおいおい考えていきたいです。

twentyfourteenの子テーマでのカスタマイズを継承していきたい

このblogを書きながらtwentyfourteenの子テーマでは色々カスタマイズをしてきました。このblogに新しいテーマを適用するにあたっては今までのカスタマイズを継承しないと記事がおかしな事になってしまいます。ということで今使っているtwentyfourteenの子テーマでやっているカスタマイズを少しずつ新しい子テーマでもできるようにしていきたいと思います。

見た目ですぐに違いが分かるのが　h2　の表現です。

今は、

こんな感じですが、twentyfifteenでは

こんな感じです。この部分は、

fontawesomeで簡単にかっこいいアイコンを使おう！

でカスタマイズをしました。修正するのは3カ所です。1つめはheader.phpです。twentyfifteenからheader.phpを子テーマのtwentyfifteen-ryusにコピーします。

そして、

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
</head>

</head> の前に上記のように　font-awesome のリンクを追加します。

２つめは　style.cssに

h2 {
    font-size:20px;
    padding:10px 0px 10px 1px;
    border-top:1px dotted #5e4390;
    border-bottom:1px dotted #5e4390;
}

を追加します。

３つめは　twentyfifteen-ryusに新しく　functions.php を作成します。そして

<?php
// h2にfontawesomeを追加する
function ryus_h2_add($text ) {
    $text = str_replace('<h2>', '<h2><i class="fa fa-smile-o" style="margin-right:7px;"></i>', $text);
    return $text;
}
add_filter( 'the_content', 'ryus_h2_add' );

このように記述して保存します。これで表示すると、

今と同じように上下に点線が入って、頭にスマイルマークが入りました。

まとめ：まだまだ先は長そう…

今までたくさんのカスタマイズをtwentyfourteenの子テーマで行ってきました。これからはtwentyfifteenの子テーマでカスタマイズをしていきたいと思いますがかなりの量のカスタマイズをしてきたのでまだまだ先は長そうです。

この次は画面の幅を拡げるのとフォントの大きさをもう少し小さくするあたりからやっていこうと思っています。