WordPressで子テーマを作る

WordPressって、割合頻繁にアップデートされるんですよね。テーマもアップデートされるので、テーマ内のファイルを直接カスタマイズしていた場合、書き込んでいたものがすべて消えてしまった!なんて悲しいことになってしまいます。つらいですねー。

そんなことが起こらないように、「WordPressのインストール」→「設定」→「テーマを選らぶ」まで進んだら、まずはカスタマイズ専用の「子テーマ」を作成します。これで、元々のテーマ(親テーマ)がアップデートされても、子テーマはそのままカスタマイズされた状態で残ります。

子テーマ作り手順

1. 最低限必要なファイルを作る( style.css と function.php )
2. 子テーマのディレクトリを作り、ファイルをアップロード
3. WordPress 管理画面より、子テーマを有効化する

手順その1. ファイル作成(style.css と function.php )

このような二つのファイルを作成します。

style.css

/*
 Template:     twentyseventeen
 Theme Name:   twentyseventeen-child
*/

新しいスタイルシート(style.css)を作り、スタイルシートヘッダに、最低限必要な2つの情報を書き込みます。

Template: 親テーマのディレクトリ名
Theme Name: 子テーマ名

親テーマのディレクトリ名ですが、サーバーにあるWordPressファイルの中、「wp-contents > themes」の直下に見つかります。
子テーマ名は任意ですが、親テーマ名に「-child」を付け加えることが推奨されています。

functions.php

<!--?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}
?>

新しいfunctions.phpを作り、親テーマと子テーマのスタイルシートをキューに入れる記述をします。4行目で親テーマのstyle.cssを先に読み込み、続いて5行目で子テーマのstyle.cssが読み込まれます。

他に、style.cssに@importを書き込む方法もありますが、こちらの方法が推奨されていますね。実際に私も試してみましたが、反応やや遅めです。

手順その2. 子テーマのディレクトリを作り、ファイルをアップロード

子テーマのディレクトリを作ります。場所は、サーバーにあるWordPressファイルの中、「wp-contents > themes」内。
親テーマと同じ階層に置きます。

作ったディレクトリに、「style.css」と「functions.php」をアップロードします。

手順その3. WordPress 管理画面より、子テーマを有効化


WordPress 管理画面より、「外観」→「テーマ」で、先ほど作った子テーマが反映されているか確認します。

子テーマがあったら、「有効化」をクリック。

これで子テーマの設定は終了です。

親テーマと子テーマの関係

CSSなら、先ほど作ったstyle.cssに、追加したい内容のみ書き込みます。
その他、PHPファイルは、親テーマからダウンロードしたものをカスタマイズし、子テーマへアップロードします。
(PHPファイルは、特に子テーマとの関係を記述するなどの必要はありません)

親テーマの内容と、子テーマの内容は、以下のような関係で反映されます。

CSS: 親テーマの「style.css」に、子テーマの「style.css」を 内容を追加
PHP: 親テーマのPHPファイルに、子テーマのPHPファイルを 上書き
(functions.php のみ例外)

また、子テーマのディレクトリ内に、サイトで利用する画像を入れるためのディレクトリを作っておくとよいでしょう。

WordPressでCSSのキャッシュを自動リロードさせる方法

はっと気が付いたのですが、CSSって更新しても、キャッシュに残っている場合、スーパーリロードさせないと新しいのが反映されないんですよね。ここもちょこちょことCSS書き足しているのですけれどね・・・。自分だけで見ているのなら、その都度スーパーリロードをかければいいのですが、公開していることを考えるとどうすればいいのか?「皆様、何月何日何時、CSS更新しましたので、キャッシュのリロードお願いします」なんてわけにもいきませんしね。

CSSのキャッシュを自動リロードさせるには、どうすればいいのか?
CSSファイルの更新日時を取得し、それに合わせてリロードするよう、htmlのheadに指示を書き込むことで解決できるみたいです。

やりたいこと

CSS更新時、クライアント側のキャッシュを自動的にリロードさせる

利用する関数

[ PHP関数 ]
filemtime() → ファイルの更新時刻
date() → 日時の取得

[ WordPress関数 ]
bloginfo() → サイト情報を表示
get_stylesheet_directory() → 現在のテーマ、子テーマのスタイルシートのディレクトリパスを取得

手順

1. WordPressの利用中のテーマ、もしくは子テーマ(すでにheader.phpが子テーマの中にあるのなら)から、FTPで header.php をダウンロード
2. header.php に自動リロードの指示を追加
3. 子テーマに header.php をアップロード(子テーマについては後日書きます)

head.php

<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">

<!--?php wp_head(); ?-->

/* ここに↓を追加 */
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>
?ver=<?php echo date('YmdHis', filemtime(get_stylesheet_directory() . '/style.css')); ?>" />

</head>

↑の head.php は、テーマ twenty seventeen のものですが、wp_head() の読み込まれたあとに追加すれば問題ありません。
やっていることは、要するに、更新日をそのままstyle.cssのバージョン名として、新たなstyle.cssとして認識させるということです。キャッシュに残っているのと別のバージョンなら、改めて読み込まれます。

サイトにソースコードを記述する

このサイトのページに、CSSやPHPなどのソースコードを載せたいのですが、そのための記述の仕方をまとめます。

やりたいこと

左に行数を表示し、右にソースコードを記述

HTMLタグ

<pre>タグ: 整形済みテキストを表示する(ブロックレベル要素)
<code>タグ: プログラムコードやHTMLやCSSなどのコードを示す(インライン要素)

CSSカウンター

counter-reset プロパティ: カウンターに名前を設定し、値を初期化
counter-increment プロパティ: counter-resetで設定したカウンターの値に1を加算
content プロパティ: 要素を生成された値で置き換え
counter() 関数: 値を生成
::before 疑似要素: 選択した要素の最初の子要素として擬似要素を作成

ソースコード記述の為のCSS例

/* 全体を収めるブロック */
div.code-toolbar {
    position: relative;
}

/* 整数済み部分 */
pre {
    position: relative;
    padding: 1em 1em 1em 3.8em;
    overflow: auto;
    counter-reset: linenumber;
    border-left: 1px solid hsla(256, 97%, 27%, 0.71);
    font-size: 14px;
    box-shadow: 0 0.5px 0.5px rgba(0,0,0,0.1), 0 0.5px 0.5px rgba(0,0,0,0.1);
    border-top: .1px solid hsla(0, 0%, 84%, 0.1);
    border-right: .1px solid hsla(0, 0%, 84%, 0.1);
    background: #f5f2f0;
    display: block;
}

/* ソースコード記入部分 */
code {
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    position: relative;
}

/* 行数表示部分全体 */
.line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid #999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 各行数表示 */
.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

/* カウンター */
.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
}

ソースコード記述の為のHTML例

<div class="code-toolbar">
<pre><code>/* シュークリームが大好きです */
<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

ブラウザでの表示

/* シュークリームが大好きです */

WordPressのテーマ

WordPressをインストールして設定を行ったら、まず初めにすることは、「テーマ」選びかと思います。
「テーマ」とは、ブログのテンプレートの様に、Webサイトの見た目の決めるデザインのようなものですが、全体の構成や枠組み、それぞれ独自の機能まで含まれています。

最新版(WordPress 5.2)では、「Twenty Nineteen」「Twenty Seventeen」「Twenty Sixteen」の3つがインストールされていますが、「外観」→「テーマ」→「新しいテンプレートを追加」をクリックすると、何千個ものテーマが表示されます。

「Twenty ~」という、開発された年数が名付けられたテーマは、全てWordPressのデフォルトのテーマで、利用者も大変多く、アレンジの仕方、扱い方など、たくさんの人が、サイトなどで、分析、解説していますね。分からない所があっても、ネット検索すると、大概、どなたかのサイトで答えが見つかります。私のこのサイトも「Twenty Seventeen」を利用しています。

その他のすごーくいっぱいあるテーマは、無料のもの、有料のもの、一部有料のもの、ある機能に特化したもの、デザインも様々で、迷ってしまいます。こちらもネット検索すると、オススメや特徴をまとめたWebサイトが多数あるので、そのようなものを参考にするのもよいかもしれません。

テーマを決めたら、カスタマイズを始めるのですが、その前に、テーマ内のファイルの関係をまとめてみました。ざっくりとした私の理解の範囲ですが。

「functions.php」は、テーマの中の王様のような存在です。各phpファイルを関係づけ、全体をまとめます。

それぞれのファイルの変更は、直接上書きするのではなく「子テーマ」を作成し、そこに変更点、追加点を記載していきます。(「子テーマ」については、また別に書きたいと思います)

CSS ボタンジェネレイター

CSSってスタイルの指定以外にも、結構色々な事ができるんですよね。jQueryやFlashの代わりとか、絵がかけるとか。

こんなドラえもんとか!→ CSSだけで描いたドラえもん

すごいですねー。

ウェブサイトに使われるボタンは、画像を利用するより、CSSのみで実装する方が軽量化を図れるし、SEOの観点からも優れていると言われています。CSS3の「border-radius(角丸)」や「linear-gradient(グラデーション)」を組み合わせると、画像と間違えるような美しいボタンが出来るのですが、少々面倒ですね。そんな時、CSSボタンジェネレーターを使うと、簡単にボタンのCSSを生成してくれます。

「CSSボタンジェネレーター」で検索すると、色々出てくると思いますが、私が利用しているのはこちらです。

www.bestcssbuttongenerator.com

左の部分から、基本のデザインを選び、右の部分で、細かな設定を調整します。
Text: ボタンの文字列、任意のクラス名、フォントスタイル、サイズ
Size: ボタンの高さ、幅
Border: ボタンの角丸、輪郭線幅
Box Shadow: 影の種類

スタイルが決まったら、出来上がったボタンをクリック。そうすると、右の部分に、HTMLとCSSが表示されます。あとはそれをコピペするだけ。
1行目はHTMLに、それ以外はCSSに。HTMLにリンク先を入れれば、それで完了です。

About Me

↑ 出来上がったボタン

便利ですね!

WordPress – 初心者以前の基本知識

世界で最も利用されているCMSであるWordPress。実際に使ってみたいと思っても、CMSに不慣れだと、そもそも何がどうなっているのか、どこから始めればいいのか、よく分からず、なかなか手が出せないということもあるかと思います。WordPressの使い方に関する書籍も出版されていますし、たくさんの人がウェブサイトで解説もしてくれているのですが、もっと基本の基本の基本、これってどうなっているの?っていう所をまとめてみたいと思います。

WordPressを利用するには、PHP(プログラミング言語)の利用できるウェブサーバーに、

・WordPress本体をインストール
・データベース(mySQLなど)を作る

この二つが前提条件になります。つまり、ウェブサーバーを借りる際、PHP、及びデータベースの使用が可能なサーバーを借りなくてはいけません。

上の図に示した通り、WordPressファイルは、主にページの枠組みを作り、データベースには、主にコンテンツの内容や設定が書き込まれていきます。この二つが組み合わせってウェブサイトを生成しています。


サイトを生成する二つのうちの一つ「WordPressファイル」の中身を覗いてみると・・・

PHPファイルがずらっと並んでいますね。これは全て、ウェブサイトの枠組みを構成するための部品です。WordPressをインストール後、ブラウザ上で操作している限り、これらのPHPファイルに直接手を加えることはありませんが、細かなオリジナルな設定を行う場合、書き換えたり、新たなPHPファイルなどを加えたり、という作業が必要になってきます。

さて、サイトを生成しているもう一方の「データベース」の中身はというと・・・

関連付けたデータベースに、自動的に様々なテーブルが生成されていますね。
例えば、wp_postsには、投稿された記事のテキストが書き込まれ、wp_commentsには、コメント欄に書き込まれた内容が、テーブルに書きつけられています。
データベースも、ブラウザで操作している限り、直接手を加えることはありません。サーバーのお引越しなどをする際は、データベースの内容をエクスポートする必要がありますが。

WordPressを使うにあたって、PHP/CSSの知識がなくても、ブラウザ上での操作だけで、ウェブサイトを構築することはできます。ですが、PHP/CSSの書き換えを行うにしても、1から10まで自分で書かなくてはいけないというわけではないので、必要な時に、一つ一つの要素を学んでいくこともできるので、スキルアップという意味でも、WordPressはとてもいいのではないでしょうか。