Twenty Fourteenカスタマイズ覚書

カスタマイズについて

このサイトはWordPressで作っていますが、基本的に設定はあまりいじくりたくないんです。
しかしデフォルト設定にちょっと足した程度でうまいこと行くわけはなく、テーマなりプラグインなりに手を入れざるを得ないわけです。

過去に作ったサイトではゴリゴリにテーマやプラグインやWordPressそのものに手を入れたり、ほぼ一からテーマを作り上げたりもしましたが、お仕事や誰かのためじゃないとなかなかモチベーションの維持ができません。
自分用サイトなのでのんびりやるためにも最低限の変更で行こうと思います。

なお、このページは追加でカスタマイズする度に更新します。

最終更新日：2014/4/6

テーマをいじくってみる

はじめに

過去にもいくつかWordPressでサイト作ってきたので勘所はありますが、どうせなら最新版を使おうということで2014年デフォルトの「Twenty Fourteen」を選択。これをベースにいじくります。
なお、設定で簡単に変えられるのは除外します。ソース直接編集するとかそういうのだけまとめ。

まずは気になるところをざっくりと調査。
基本的にそのままでもいいんじゃない？って感じのテーマなのですが、やはり気になるところは出てきます。

フォントを変えたい
英文字が全部大文字になるとこをどうにかしたい
フォントがpx指定なのが気に入らない
本文の幅を広げたい
注目記事を自分の好きなように設定したい
H1～H4くらいは分かりやすくしたい
blockquoteを見やすくしたい
左上の方にある「ものだもの」の文字を画像にしたい

とりあえずこんなところで。
いじっていきます。

子テーマを作る

当初は直接style.cssをいじくってたのですが、修正量が増えてきたので子テーマ化。
ただ、一部の一括置換するようなのは子テーマのcssに持ってくるのがめんどいので、そのまま親テーマのcssに入れたままにしてます。そのうち直す。

ショートコードを使うようになってfunctions.phpのカスタマイズを分離できるようになったので、機能追加が便利になった。

フォントを変えたい

フォントはエディタで変更できないためCSSを直接編集。
フォントは個人的に下記がお気に入りなのでそれを設定。

通常フォント

font-family: 'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','Meiryo UI','MS UI Gothic',sans-serif;

1	font-family: 'ヒラギノ角ゴ ProN','Hiragino Kaku Gothic ProN','Meiryo UI','MS UI Gothic',sans-serif;

preタグのフォント

font-family: 'Osaka-等幅','Osaka-Mono','ＭＳ ゴシック',monospace, serif;

1	font-family: 'Osaka-等幅','Osaka-Mono','ＭＳゴシック',monospace, serif;

こんな感じで書き換え。
書き換え箇所は「font-family」でファイルを検索すれば見つかります。
継承を示す「inherit」の記載がある個所は修正しなくてOK。

英文字が全部大文字になるとこをどうにかしたい

これはCSSの「text-transform: uppercase;」という定石があるので、これを空文字に置換して解除するだけ。
空文字置換なので空行が残ってしまいますが、あまり気にしません。

本文の幅を広げたい

テーマ的には本文右側にもウィジェット置けるんですが、そこは使う予定がないので代わりに本文の幅を広げます。

これもCSSを編集。
「max-width」が474pxのがそれっぽいからまとめて700pxに置換。こんなもんかな。

フォントがpx指定なのが気に入らない

px指定だと文字の表示でいろいろあるわけでできれば相対的なサイズにしたいのですが、CSSを見ると修正量が膨大。諦めました。

最近はページまるごと拡大縮小ができるのでそれでよしとします。
時間があればやってみたいけど、他のテーマに乗り換えたいと思ったときに無駄になるのでやらないかな。

注目記事を自分の好きなように設定したい

タグで設定、先頭固定で設定、phpソースをいじくって設定と手段はいろいろありますが、改造はCSS程度にしたいのと、Windows Live Writerからも容易に編集できるようにしたいということでタグを利用する方向に。

月刊誌とかをトップに出したいので「注目記事」タグを表示するようにしました。

H1～H4くらいは分かりやすくしたい

このテーマはヘッダに装飾がないので文書構造が分かりにくいです。
装飾で多少はメリハリが付くならということで、スタイルシートいじって飾ってみました。

グラデーションのCSSは下記サイトでサクサク作成。
Ultimate CSS Gradient Generator – ColorZilla.com
http://www.colorzilla.com/gradient-editor/

blockquoteを見やすくしたい

引用で使うblockquoteは左にマージン入れて二本線を追加。
引用したっぽく見えればいいかな。

左上の方にある「ものだもの」の文字を画像にしたい

親テーマの［header.php］を子テーマのディレクトリにコピーして出力部分を書き換えればOK。

<h1 class="site-title"><a href="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;" rel="home"><img class="site-title-image" src="http://monodamono.com/wp-content/uploads/logoh40.png" alt="<?php bloginfo( 'name' ); ?> width="100" height="40" border="0" /></a></h1>

45	<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img class="site-title-image" src="http://monodamono.com/wp-content/uploads/logoh40.png" alt="<?php bloginfo( 'name' ); ?> width="100" height="40" border="0" /></a></h1>

プラグインを選ぶ

プラグインは管理が面倒なのであまり追加はしたくないのですが、今までWordPressでサイトを構築してきて最低限これくらいは入れとこうと思ったやつを有効化したり導入したりします。

完成まで鍵かけたりメンテ中にしたり

まず最初に入れるのが「Members Only」。
一時閉鎖が簡単にできるんで重宝してる。

スパムコメント対策

最近はどんなブログでも爆撃されるので「Akismet」を有効化し、設定。

セキュリティ対策

ブルートフォースアタック対策に「Limit Login Attempts」を導入。

各種パスワードはランダム生成した長いやつを使い、辞書攻撃を効かないように。
自分でも覚えられないけど、アプリやLive Writerで書くのであまり気にならない。

メディアライブラリにアップする画像からExif情報を削除する「EXIF-Remove-ImageMagick」を導入。
vmsd-grapher: Display relations between VMWare snapshots
http://www.vdberg.org/~richard/exif-remove-imagemagick.html

画像表示

別のサイトで使っている「Highslide for WordPress *reloaded*」を導入しようと探しに行ったらプラグインページが消えてた。なくなった？
作者ブログはあるっぽいけど、リンク先が消えているからなんとも。
~~別サイトからプラグインファイル一式持ってきて入れたけど、画像リンクは付ける予定ないから有効化はしないでおく。~~
画像リンクをしないポリシーにしたので、入れておいても意味ないので消しました。

巨大画像対策

記事の投稿前に画像縮小とかめんどうなので、アップロード時に自動縮小してくれるプラグイン「Imsanity」を導入。
メディアライブラリへのアップロードや画像つき記事の投稿時、縦横1200pxを超える画像は1200pxに収まるように自動縮小。
ただし、ヘッダなどに画像投稿する際は縮小しないようにした。

SNS対応

~~各種SNSボタンを置く「Tweet, Like, Share and Google +1」を追加。~~
※思うような動作にならないので削除

各種SNSボタンを置く「WP Social Bookmarking Light」を追加。
自分のSNSページと連動させる必要もないのでこれで十分。

バックアップ

定番の「BackWPup」で日次バックアップを設定。

リビジョン管理不要

記事編集はWindows Live Writerなどの外部ツールで行うため、リビジョン管理は不要。
~~「Disable Revisions」でリビジョン機能を切りました。~~
「WP Total Hacks」に同じ設定があったのでそちらでリビジョンを取らないように設定。

Amazonアフィリエイト用のHTMLを自動構築

当初はAmazonで生成したタグを貼り付けていたのですが、だんだんと面倒になってきた。
簡単に挿入できるようにしようと「amazonjs」を導入。

これ用のショートコードは後述のブックマークレットで作成する形に。

マルチバイト対策

特に有効化しない理由は無いので「WP Multibyte Patch」を有効化。

いろいろ設定用

細かい設定をいろいろするため「WP Total Hacks」を導入。

ソースコード表示用

ソースコードはpreタグで書いてたんですが、それなりにちゃんと表示したくなったので「Crayon Syntax Highlighter」を導入。

faviconとapple-touch-icon

この二つは自己満足のレベルなのですが、せっかく嫁が題字を書いてくれたので活用することに。

apple-touch-icon

題字を128pxサイズに収めてapple-touch-iconとして作成。
これをプラグイン「WP Total Hacks」で設定すればOK。

favicon

favion用にicoファイルを作る方法はいくつかあるのですが、画像を編集しているPhotoshop Elementsでやるのが操作的にも画質的にも良さそうなのでこれで行くことにしました。
そのままでは出力できないので、下記プラグインを入れてicoファイル出力できるようにします。

Telegraphics – Free plugins for Photoshop & Illustrator…and other software
http://www.telegraphics.com.au/sw/product/ICOFormat#icoformat

apple-touch-iconを元に128px、64px、48px、32px、24px、16pxのicoファイルを生成して保存。
これをVisual Studioのicoファイルエディタで一つのファイルにおまとめして「favicon.ico」ファイルで保存。
おまとめついでに縮小のときにちょっとおかしくなったところをドット打って微調整。

完成したfaviconをプラグイン「WP Total Hacks」で設定すればOK。
アドレスバーでは16×16、デスクトップにショートカットを貼り付けたら相応の解像度で表示されたので成功です。

Amazonのリンク作成を楽にやりたい

Amazonのリンクは当初Amazon提供のツールでやってたんですが、HTMLを生成して貼り付けという手間が面倒になってきたので、ブックマークレットとショートコードで楽することに。

レビュー用ブックマークレット

自分のレビューのページからレビュー用のショートコードを構築するブックマークレットを作成。

javascript:(function(){function%20o(t,h){var%20d=window.open().document;d.writeln('<textarea%20id=t%20cols=80%20rows=5>[[review%20rid=%22'+h.substr(31,h.indexOf('%2F',31)-31)+'%22%20title=%22'+t.replace(%2F%5C]]%2Fg,'%26amp%3B%2393%3B').replace(%2F%5C[%2Fg,'%26amp%3B%2391%3B')+'%22]<%2Ftextarea>');d.close()}o(document.title,location.href);})();

javascript:(function(){function%20o(t,h){var%20d=window.open().document;d.writeln('<textarea%20id=t%20cols=80%20rows=5>[[review%20rid=%22'+h.substr(31,h.indexOf('%2F',31)-31)+'%22%20title=%22'+t.replace(%2F%5C]]%2Fg,'%26amp%3B%2393%3B').replace(%2F%5C[%2Fg,'%26amp%3B%2391%3B')+'%22]<%2Ftextarea>');d.close()}o(document.title,location.href);})();

URLの特定位置からレビューのIDを引っこ抜き、ページのタイトルと合わせて下記のようなショートコードにする感じ。

[[review rid="R3THQMIT6C8I6M" title="Amazon.co.jp： 別冊 少年マガジン 2014年 04月号 &#91;雑誌&#93;の しょーぢさんのレビュー"]]

1	[[review rid="R3THQMIT6C8I6M" title="Amazon.co.jp：別冊少年マガジン 2014年 04月号 [雑誌]のしょーぢさんのレビュー"]]

商品用ブックマークレット

商品のページからamazonjs用のショートコードを作るブックマークレットを作成。

javascript:(function(){function%20o(t,h){var%20p=h.indexOf('%2Fdp%2F')+4;var%20d=window.open().document;d.writeln('<textarea%20cols=80%20rows=5>[[amazonjs%20asin=%22'+h.substr(p,h.indexOf('%2F',p)-p)+'%22%20title=%22'+t.replace(%2F%5C]%2Fg,'%26amp%3B%2393%3B').replace(%2F%5C[%2Fg,'%26amp%3B%2391%3B')+'%22%20locale=%22JP%22]<%2Ftextarea>');d.close()}o(document.title,location.href);})();

javascript:(function(){function%20o(t,h){var%20p=h.indexOf('%2Fdp%2F')+4;var%20d=window.open().document;d.writeln('<textarea%20cols=80%20rows=5>[[amazonjs%20asin=%22'+h.substr(p,h.indexOf('%2F',p)-p)+'%22%20title=%22'+t.replace(%2F%5C]%2Fg,'%26amp%3B%2393%3B').replace(%2F%5C[%2Fg,'%26amp%3B%2391%3B')+'%22%20locale=%22JP%22]<%2Ftextarea>');d.close()}o(document.title,location.href);})();

レビュー用と同じでURLから特定条件でASINを引っこ抜き、ページのタイトルと合わせて下記のようなショートコードにする感じ。

[[amazonjs asin="B00IJGOJHC" title="Amazon.co.jp： 別冊 少年マガジン 2014年 04月号 &#91;雑誌&#93;: 本" locale="JP"]]

1	[[amazonjs asin="B00IJGOJHC" title="Amazon.co.jp：別冊少年マガジン 2014年 04月号 [雑誌]: 本" locale="JP"]]

コードを見てわかる通り、レビュー用も商品用もURLの特定の場所や文字から引っ張ってるだけなので仕様変更に弱いです。
自分用なので何かあったら直す前提。

ショートコードの処理

商品の方はamazonjsを使うんですが、レビューの方は自作。
子テーマにしたfunctions.phpに下記コードを追加して処理できるように。

<?php
function review_func($atts) {
    extract(shortcode_atts(array(
        'rid' => 'norid',
        'title' => 'Amazon.co.jpの商品を見る',
    ), $atts));
    $title_code = htmlspecialchars_decode($title, ENT_QUOTES);
    return <<<EOF
<div class="amazon_review"><a target="_blank" href="http://www.amazon.co.jp/review/${rid}/?_encoding=UTF8&amp;camp=●●●&amp;creative=●●●&amp;linkCode=ur2&amp;tag=◆◆◆" title="${title_code}">${title_code}</a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=◆◆◆&amp;l=ur2&amp;o=9" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></div>
EOF;
}
add_shortcode('review', 'review_func');
?>

<?php

function review_func($atts) {

extract(shortcode_atts(array(

'rid' => 'norid',

'title' => 'Amazon.co.jpの商品を見る',

), $atts));

$title_code = htmlspecialchars_decode($title, ENT_QUOTES);

return <<<EOF

<div class="amazon_review"><a target="_blank" href="http://www.amazon.co.jp/review/${rid}/?_encoding=UTF8&camp=●●●&creative=●●●&linkCode=ur2&tag=◆◆◆" title="${title_code}">${title_code}</a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=◆◆◆&l=ur2&o=9" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></div>

EOF;

}

add_shortcode('review', 'review_func');

「●●●」のところは人によって違うと思うところ。
「◆◆◆」のところには各自のトラッキングコード。
このショートコード処理でレビューページへのリンクができる。

結局コードを書くことになったけど楽になったから良しとする。

「最近の投稿」を画像入りにしたい

長いので記事にまとめました。

WordPressで画像入り「最近の投稿」ウィジェットを作る

セキュリティの更なる向上

ここ最近［xmlrpc.php］を狙った攻撃が頻発してるそうで、ログオンアタック防御も兼ねて対策することに。
［xmlrpc.php］を無効化するのが定番ではあるんですが、Windows Live Writerを使っているんで無効化ではなくアクセス制限で対応。
ログオン画面へのアクセス制限とセットで設定。

追加するコードはこんな感じ。
※「.example1.ne.jp」等は例示用。実際は自分のISPのリモホを入れます。

<Files ~ "^(wp-login\.php|xmlrpc\.php)$">
Order deny,allow
Deny from all
allow from .example.ne.jp
</Files>

Order deny,allow

Deny from all

allow from .example.ne.jp

</Files>

これをWordPressが追記した IfModule の前に追記すればとりあえずいいかなと。

もっといじりたいところはあるけれど

キリがないのでここまで。

きっとまたいじくると思う。

※このページのアイキャッチ画像は足成で公開されているフリー素材を使用させていただきました

Twenty Fourteenカスタマイズ覚書

カスタマイズについて

テーマをいじくってみる

はじめに

子テーマを作る

フォントを変えたい

英文字が全部大文字になるとこをどうにかしたい

本文の幅を広げたい

フォントがpx指定なのが気に入らない

注目記事を自分の好きなように設定したい

H1～H4くらいは分かりやすくしたい

blockquoteを見やすくしたい

左上の方にある「ものだもの」の文字を画像にしたい

プラグインを選ぶ

完成まで鍵かけたりメンテ中にしたり

スパムコメント対策

セキュリティ対策

画像表示

巨大画像対策

SNS対応

バックアップ

リビジョン管理不要

Amazonアフィリエイト用のHTMLを自動構築

関連記事を表示

マルチバイト対策

いろいろ設定用

ソースコード表示用

faviconとapple-touch-icon

apple-touch-icon

favicon

Amazonのリンク作成を楽にやりたい

レビュー用ブックマークレット

商品用ブックマークレット

ショートコードの処理

「最近の投稿」を画像入りにしたい

セキュリティの更なる向上

もっといじりたいところはあるけれど

コメントを残すコメントをキャンセル

使ったもの見たもの読んだものをレビューして紹介しています

カスタマイズについて

テーマをいじくってみる

はじめに

子テーマを作る

フォントを変えたい

英文字が全部大文字になるとこをどうにかしたい

本文の幅を広げたい

フォントがpx指定なのが気に入らない

注目記事を自分の好きなように設定したい

H1～H4くらいは分かりやすくしたい

blockquoteを見やすくしたい

左上の方にある「ものだもの」の文字を画像にしたい

プラグインを選ぶ

完成まで鍵かけたりメンテ中にしたり

スパムコメント対策

セキュリティ対策

画像表示

巨大画像対策

SNS対応

バックアップ

リビジョン管理不要

Amazonアフィリエイト用のHTMLを自動構築

関連記事を表示

マルチバイト対策

いろいろ設定用

ソースコード表示用

faviconとapple-touch-icon

apple-touch-icon

favicon

Amazonのリンク作成を楽にやりたい

レビュー用ブックマークレット

商品用ブックマークレット

ショートコードの処理

「最近の投稿」を画像入りにしたい

セキュリティの更なる向上

もっといじりたいところはあるけれど

コメントを残す コメントをキャンセル

使ったもの見たもの読んだものをレビューして紹介しています

コメントを残すコメントをキャンセル