[WordPress] TwentySixteenの導入:子テーマをカスタマイズ


前回子テーマの作成に成功したので、今度は子テーマをカスタマイズしていこうかと。

と言いつつ、子テーマのカスタマイズって実際にはどのように手をつけたらいいのか・・・さっぱりわからない・・・。
「子テーマのstyle.cssを優先して、足りない部分を親テーマのstyle.cssで補完する」というようなイメージでぼんやりとらえていたけど、本当にそれで合っているのか??

「子テーマ」「カスタマイズ」等で検索しても、子テーマ作成の方法だけの記事がぶわーーーっと出てきて、「作成した後どうするか」を解説してある記事がなかなか見つからず、やっとこさ発見しました。

バイラルクラブ – wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順

一般的には、親テーマの内容を全コピーして、カスタマイズしたい部分だけ、変更・追記していく形が良いでしょう。

アフィリエイトで稼ぐ方法を全部話そうと思う – WordPressでフォントや文字大きさ、行間をカスタマイズ
style.cssに関しては、「全コピーして必要な箇所だけを変更・追加」ではなく、「最初に作った状態に追記」という形でいいようです。

とりあえず試しに、上記サイトで例として書かれているフォントの変更にチャレンジ。
・・・してみたものの、記事本文が明朝体のまんま!!

原因究明のため、続く・・・

[WordPress] TwentySixteenの導入:子テーマ編


WordPressもバージョン4になり、新しい公式テーマも追加されたので、思い切ってTwentySixteenのカスタマイズに着手することにしました。
今まではものぐさなことに親テーマをそのまま書き換えてテーマをカスタマイズしていましたが、「子テーマを作ってカスタマイズするのが推奨されている」と聞き、慌ててまずは子テーマ作りに着手。

そもそも子テーマとは何なのか・・・
カスタマイズしたいテーマ(今回はTwentySixteen)を親として作成し、親テーマを直接カスタマイズするのではなく、子テーマ側をカスタマイズすることによって、TwentySixteenがアップデートされた時でもカスタマイズした箇所が変更されてしまわないようにするもの。らしいです。

「子テーマ作成」で検索すると山ほど解説してくださっている記事が見つかると思いますが、個人的には一つの記事だけではなくいくつかの記事をマルチに参考にすることをお勧めしたいです。なぜかと言うと、ハマったから。
必要なコードが抜けていたり、コードが全角で表示されてしまっていて丸ごとコピペしたら失敗した、という記事もあったのでね!

子テーマの作り方

コマンドラインの使えないレンタルサーバなので、FTPでやりました。

(1):まずはFTPソフトでWordpressがインストールされているディレクトリに移動、wp-contentディレクトリ内のthemesディレクトリの中に子テーマのディレクトリを作成する。
子テーマの名前を決めてそのテーマ名のディレクトリを作成します。「twentysixteen」の子テーマだから「twentysixteen-child」にするとわかりやすいよ!という記事が多いですが、別に好きな名前をつけてOK。今回は「twentysixteen-child」にしてみた。

(2):「style.css」という空のテキストファイルを作成。中に書く内容はこちらを参考にしました(xserver用の解説だけどコードの部分はこれを使わせて頂きました)。
  ここで文字コードと改行コードに注意せなあかんようです。文字コードはデータベースサーバをUTF-8にしたのですが、Wordpressの場合は「BOMなし」というのが標準らしく、Terapadの「文字/改行コード指定保存」で「UTF-8N」と「LF」を選択して保存しました。詳しくはこちら

(3):「functions.php」という空のテキストファイルを作成。中に書く内容はstyle.cssと同じくこちらを参考にしました。

(4):(1)で作成したディレクトリ(今回はtwentysixteen-child)に、(2)と(3)で作成したstyle.cssとfunctions.phpをアップロードする。
(5):Wordpressのダッシュボードにアクセスし、外観>テーマを選択。(2)で設定したテーマ名の項目ができているはずなので、「有効化」をクリックするとサイトに反映される。

以上で作成は完了!

自分の場合は先ほど書いた「コードを丸ごとコピペしたら全角が入っていておかしくなった」「改行コードと文字コードがおかしかった」の2点で最初は失敗しましたが、最終的には作成できました。

続く。

【TwentyTwelve】ウィジェット部分のプチカスタマイズ


前回の記事:【TwentyTwelve】サイドバーのカスタマイズ

今回はウィジェットエリアのカスタマイズ。
ウィジェットエリアはサイドバーに表示されている「最近の投稿」「カテゴリー」「アーカイブ」等です。

今回も前回同様「style.css」をいじっていきます。
前回までのカスタマイズでこうなっている状態です↓
sg-005

(1) 背景をカスタマイズ

デフォルトだと背景色が設定されていないので、背景に色をつけようと思います。

変更箇所は
style.css の 611行目あたり

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}

ここです。

これを

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
/* 以下を追加 */
	background:#ffb6c1;
/* 追加ここまで */
}

こんな感じで変更。
sg-103
背景色がつきました~(カラーネームbisque・#ffb6c1)

(2) 更に枠線をつけてみる

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
	background:#ffb6c1;
/* 以下を追加 */
	border:1px solid #bc8f8f;
/* 追加ここまで */
}

sg-104
こうなります。rosybrown(#bc8f8f)で枠線をつけました。

(3) 余白を設定する

また前回と同じく枠と文字の隙間がないので

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
	background:#ffb6c1;
	border:1px solid #bc8f8f;
/* 以下を追加 */
	padding:10px;
/* 追加ここまで */
}

これで適度に隙間が空きました。
sg-107

(4) ついでに角丸にしちゃう

.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
	background:#ffb6c1;
	border:1px solid #bc8f8f;
	padding:10px;
/* 以下を追加 */
	border-radius:10px;
/* 追加ここまで */
}

sg-111
無事に丸まりました。

(5) ウィジェットのタイトルをカスタム

style.css 619行目あたりの

.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}

これを変更します。
背景を#333333(濃いグレー)、文字色をbisque(#ffb6c1)、余白を5pxにしたいので

.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
/* 以下を追加 */
	background-color:#333333;
	color:#ffe4c4;
	padding:5px;
/* 追加ここまで */
}

これで
sg-201
一応タイトルっぽい感じは出たかなぁ・・・と。

【TwentyTwelve】サイドバーのカスタマイズ


前回の記事:「ヘッダ画像の登録」

今回はサイドバーをプチカスタマイズして行きます。
サイドバーは
sg-001x
これ。
レンタルブログやスクリプトによっていろんな呼び方がありますが、Wordpressで言えばウィジェットが表示されてる所ですね。Wordpressだとデフォルトでは右側にあります。右サイドバーとも言えるかも。

sg-001
ご覧の通りデフォルトだとシンプルすぎてサイド「バー」と言われても何のバー感もないな・・・

(1) 背景をカスタマイズ

デフォルトだと白の背景になっていますが、この背景色を変更してみようと思います。
テーマフォルダ内の「style.css」を使用するので、念のためstyle.cssのバックアップを作っておくと安心かも…
style.cssの変更は、ダッシュボード>外観>テーマ編集 からも行えますし、FTPソフトでダウンロードしてから変更してまたアップロード、という方法もあります。そのへんはお好みで。

変更箇所は
style.css の 533行目あたり

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

ここです。

・例えばサイドバー全体に枠をつけたい時は

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
/* 以下を追加 */
	border:1px solid #000000;
/* 追加ここまで */
}

sg-002
黒・1px・直線の枠をつけてます。

・更に、サイドバー全体の背景色を設定したい時は

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	border:1px solid #000000;
/* 以下を追加 */
	background-color:#ffdab9;
/* 追加ここまで */
}

sg-003
カラーネームpeachpuff(#ffdab9)の背景色にしてます。

・枠と文字の隙間なさすぎ・・・と思ったら、更に更に

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background-color:#ffdab9;
	border:1px solid #000000;
/* 以下を追加 */
	padding:10px;
/* 追加ここまで */
}

sg-004
こんな感じで適当に隙間が空きました。

(1) サイドバーの左右を変更する

デフォルトだとサイドバーは右側にありますが、これを左側にしたい場合は
TwentyTwelve サイドバー/記事コンテンツの左右を入れ替える超簡単な方法 | 初めてのワードプレス カスタマイズ
こちらを参考に、style.cssの1464行目あたりの

	.site-content {
		float: left;
		width: 65.104166667%;
	}


1473行目あたりの

	.widget-area {
		float: right;
		width: 26.041666667%;
	}

のfloat:left;とfloat:right;を入れ替えるだけ!
sg-005
無事に左右逆になりました~

次の記事:【TwentyTwelve】ウィジェット部分のプチカスタマイズ

【TwentyTwelve】ヘッダ画像の登録


前回の記事:【TwentyTwelve】背景画像の設定

続きまして今回はヘッダ画像の登録。
今回も簡単にダッシュボードから登録できます!

tt06
「外観」>「カスタマイズ」をクリック。

デフォルトではサイト名と「Just another WordPress site」の文字表記のみです。
tt07
「画像を選択」で、「ファイルを選択」ボタンをクリックしてヘッダ用に用意した画像を選択し、横の「アップロード」ボタンをクリックすると、選択した画像が表示されます。

「切り取って公開する」と「トリミングをせず、このまま画像を公開する」がありますが、「トリミングをせず、このまま画像を公開する」だととりあえず画像を登録してから表示したい部分を指定できるので便利なのかも。

試しに3種類のサイズのヘッダを「トリミングをせず、このまま画像を公開する」で登録してみました。

まずは「おすすめ」と書かれている960px×250pxの画像。(わかりやすいように赤枠をつけています)
tt08

横幅が少し大きい1200px×300pxだとこんな感じ。
tt10
あれ・・・サイズほとんど変わってない。測ってみたら勝手に960×260pxに縮小されていました。

ちょっと小さくした800px×150pxだとこんな感じ。
tt09
左に寄ってしまった・・・。

デフォルトのサイト幅をそのまま使うなら、ヘッダ画像の幅は960pxで作っておいた方が無難なようですね・・・。style.cssでヘッダ画像の位置指定をすればいいだけの話ですが、今回はプチカスタムなのでパス。

画像登録の下側にある「ヘッダーのテキスト」は、デフォルトで表示されているサイト名と「Just another WordPress site」の部分。
「Just another WordPress site」は
「ヘッダー画像上にテキストを表示する」にチェックを入れると、
tt11
こんな感じで表示されるようになります。(文字色は赤にしています)
ヘッダー画像上に、っていうのは「ヘッダー画像の上に重ねて」っていう意味かと思ってました(笑)

「ヘッダー画像上にテキストを表示する」のチェックを外すと、
tt12
こんな感じに。
チェックを入れている時はヘッダ画像とサイト名にトップページへのリンクが張られていましたが、外すとヘッダ画像のみにトップへのリンクが張られるようになりました。

次の記事:【TwentyTwelve】サイドバーのカスタマイズ

【TwentyTwelve】背景画像の設定


2カラム構成のシンプルなテーマが欲しかったので、カスタム方法が入手しやすいTwentyTwelveをぼちぼちいじってみることにしました。
TwentyTwelveも新しいバージョンが出ているらしく、バージョン1.3にアップデートしてからのカスタマイズです。

とりあえずテーマを有効にしてみたところ、シンプルはいいけどなんというか・・・無味乾燥な雰囲気・・・。
tt01
これを「できる範囲で自分好みに」して行きます!

今回はまず基本中の基本、背景画像の登録。

これはダッシュボードからすぐにできるんですね~

tt02
ダッシュボードの「外観」>「カスタマイズ」をクリック。

tt03
左に表示されるメニューの「背景画像」をクリックするとメニューが展開され、「画像なし」をクリックすると新規アップロードのエリアが出てきます。

ここに用意した背景画像をドラッグ&ドロップすると、更に詳細が展開されます。
tt04
・背景の繰り返し
 今回は隙間なく背景画像を並べたいので「タイル」を選択。
 一枚の大きい画像を貼りたい時などは「繰り返しなし」、縦か横にだけ並べたい場合は「水平方向に繰り返し」か「垂直方向に繰り返し」で。
・背景の位置
 背景の繰り返しでタイルを選んだ場合は関係ないと思いますが、「繰り返しなし」「水平方向に繰り返し」「垂直方向に繰り返し」を選んだ場合は希望のものを選択。
・背景スクロール
 画面をスクロールした時に背景も一緒にスクロールするか、それとも元の位置のまま固定するかの選択です。ここもやはりタイルだとどちらでもいいと思いますが・・・なんとなく「固定」にしておくとちょっとトリッキーな気もする。

ここまで設定したら左メニュー一番上のブルーのボタン「保存して公開する」をクリックすれば完了です!
tt05
こんな感じになりました。

簡単すぎてわざわざ記事にする必要もなさげな気がします(笑)

次の記事:【TwentyTwelve】ヘッダ画像の登録

【WordPress】 HTMLやPHPのコードを直接表示するプラグイン「Crayon Syntax Highlighter」


WordPressの記事内にソースコードを記入すると、普通に直接記入したままではどえらいことになってしまいます・・・
HTMLなどを文字列でなくHTMLコードとして読み込んでしまう仕様なので仕方がないですが、これはなんとかしたい。

ということで、プラグインを探しました。
それらしきプラグインは沢山あったのですが、まず「Syntax Highlighter Compress」というのを使ってみました。

syntaxhighlighter
これです。
結果、ソースコードの部分をコード名を使ったタグのようなもので囲む(※HTMLのコードなら[HTML]~~[/HTML])、というのがネックで・・・。めんどくさがりなのでコードの種類をわざわざ書き分けるのすらめんどい。しかも何故かWordpressのコードを表示させようとしてもマトモに動かず・・・

その後、こちらを見て「Crayon Syntax Highlighter」を使うことに決定!

表示デザインのカスタマイズができることももちろん嬉しい機能ですが、わざわざコードに合わせて[HTML]だの[CSS]だの書き分けなくても[crayon][/crayon]で囲むだけ!っていうのもめんどくさがりにはうってつけ。
しかもちゃんと投稿画面の上のビジュアルエディタ(って言うんですかね)にも「crayon」のボタンが出てる!やった!!

インストールは本当に簡単で、ダッシュボードの「プラグイン>新規追加」で「Crayon Syntax Highlighter」を検索し、
crayonshl出てきた該当プラグインの「いますぐインストール」をクリック→インストール完了画面の「有効化」をクリックするだけ!

そして記事投稿画面で、コードをそのまま表示させたい部分を[crayon]と[/crayon]で囲むだけ。

すると
crayon_code
こんな感じに表示されます。おおお簡単・・・!
直接コピペしても行番号はコピーされない、っていうのも当たり前のようだけど便利。

デザインの変更も簡単で、プラグインインストール後にダッシュボードのサイドバー(?)の「設定」に「Crayon」という項目が増えるので、そこからけっこう大幅にカスタマイズできます。
上の例のフォントはなんとなく気に入らない(もっとかっちりしたフォントがいい)ので、変更しようかな。


参考URL: