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

この記事は約7分で読めます。

Image [6]

先日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');

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

Image [1]

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

Image [3]

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

フォントを変更する

今のblog詳細画面

Image [2]

twentyfifteenでのblog詳細画面

Image [3]

と、ぱっと見て違うなと思うのは基本的なフォントです。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 にしてしまいます。これで表示すると、

Image [4]

このように全体的に 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;
}

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

Image [5]

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

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

Image [8]

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

Image [13]

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

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

Image [9]

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

twentyfifteenでは

Image [10]

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

Image [11]

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

Image [12]

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

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

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

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

今は、

Image [14]

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

Image [15]

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

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 のリンクを追加します。

2つめは style.css

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

を追加します。

3つめは 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' );

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

Image

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

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

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

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

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPressテーマ全般
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. […] twentyfifteenの子テーマを作る フォント指定と固定メニュー | RYUS blog […]

  2. […] 出す方法が主流だったが、「@importを利用すると呼び出しが遅くなる」などの弊害があるので、functions.php側で呼び出す方法が現在推奨されている @import記述を利用した子テーマ参考サイト […]

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。