Home JavaScript Greasemonkey PHP

このブログで使ってる WP テーマと追加したプラグインの話2016-08-10

1つ前のポスト、サブディレクトリごとに運用されてたサイトをごっそりとサブドメインに移行した話の続きの話です。

WP テーマ選び

最後に残ったのは WP のテーマやプラグインなどをどうするかです。WP のテーマを選ぶにあたっては、下記の内容を勘案して選びました。
  • 当初から予定していた通りレスポンシブである事
  • WP の作法に沿ってない野良テーマを避ける事
  • なるべくシンプルで飽きの来ないデザインである事
  • ブログっぽい普通のデザインである事 (商業サイト的なデザインでない事)
WP 公式のディレクトリでフィルタリングしながらいくつか探してみて、最終的に今使っている　Dustland Express というテーマに落ち着きました。他の比較対象になったテーマと比べて、幅を狭めたときにメニューの挙動が自然だったこと、うるさいアニメーションなどが無かったこと、などが決め手になっています。

ただ、例によって GAE の制限のため WP の管理画面からテーマをインストールして保存することは出来ないので、テーマの追加についてはローカルにいったん追加したものを、手動でアップロードしてやる必要があります。アップロードさえ終われば、後は普通通り WP 管理画面で選択し有効にするだけです。

WP テーマの修正部分

当初、WP テーマについては手を入れない方針だったのですがどうしてもデフォルトの管理機能だけでは対応しきれない部分があり、結局いくつかテーマのファイル自体をいじる必要がありました。

例えば、ヘッダ部分にある画像。本来であれば管理画面からアップロードして指定可能なのですが、この部分がどうも GAE のプラグインと相性が悪く正しく動作しなかったので、直接テンプレート側を書き換えて s.otchy.net 上の画像を読むように変更してあります。

また細かい部分で、テーマの挙動やデザインの修正をするために、独自の JS ファイルと CSS をこれまた同様 s.otchy.net から読むようにしました。これらのファイルは完全にテーマに依存するファイルなので、テーマのディレクトリに置いても良かったのですが、静的ファイルのドメインを分ける事による高速化のメリットと、s.otchy.net の方が www.otchy.net よりデプロイが早く変更がすぐに行えるメリットがあったので、s.otchy.net 側に置くことにしました。

CSS では例えば、際限なく長く伸びてしまう下部のウィジェットに max-height を設定したり、JS では例えば、WP の設定項目で変更できない a タグに target="_blank" を追加したりなどしています。

追加した WP プラグイン

デフォルトの日本語 WP に入っているプラグイン以外に、現在、下記のものを追加しています。
  • Disable Responsive Images
    • s.otchy.net に置いて読み込んでた画像が最初はことごとく404 で謎すぎたので調べてみたところ、WP の少し前のバージョンからポストに含まれる "全ての" img タグをフックして、レティナ向けの srcset を挿入するというかなり荒ぶった仕様が追加されたらしく、それがまた、外部に置いた画像の読み込みに対して正しく動作しない (当たり前。@2x 画像とか用意してないし) ので、それを無効にするプラグインです。なんだこれ、設定で元々オンオフ可能であるべきだろ…。
  • Favicon Rotator
    • 実は新サーバへの移行後に favicon の設定を忘れてた事に気づいたので、favicon を管理するプラグインを導入しました。これはちゃんとしてて、GAE プラグインとの相性も良く、管理画面からアップロードした favicon ファイルでそのまま動作しています。
  • Google Analytics by MonsterInsights
    • これも同じく、新サーバへの移行後に Google Analytics の設定を忘れていたことに気づいたので、それを管理するプラグインを導入しました。有料版を購入するとかなり色んな事が出来るようになるようなのですが、単に全ページに決まったスニペットを挿入するだけなら無料版で十分でした。
  • Short Bio Widget
    • メニューに Bio を出すためのプラグイン。まあそれだけっていう感じです。デザイン自体はすこし独自の CSS でいじって拡張しています。
テーマと同様、これらのプラグインも手動でアップロードの後、管理画面で有効にする必要があります。なお、いったん有効になった後のプラグイン内の設定などは、管理画面で管理できます。それらのオプション値は DB に保存されるからですね。

書き足したメニュー

既成の WP ウィジェットでまかなえない追加機能なども、なるべくテーマをいじること無く追加したかったので、カスタムメニューを追加したり、テキストタイプのウィジェットを追加したりしたりもしました。

まずカスタムメニューを複数用意し、それぞれにカスタムリンクを追加することで、右メニューにある「自サイト・自作ツール」ウィジェットと「外部関連サイト」をこしらえました。まあここまでは普通の WP の機能だけで作った感じです。

テキストタイプのウィジェットとして追加したのは、右メニュー途中にあるはてブ人気エントリと最上部のソーシャルボタン領域です。それぞれ下記のようなコードになっています。

はてブ人気エントリ
<script language="javascript" type="text/javascript" src="//b.hatena.ne.jp/js/widget.js" charset="utf-8"></script>
<script language="javascript" type="text/javascript">
Hatena.BookmarkWidget.url = "https://www.otchy.net/";
Hatena.BookmarkWidget.title = "はてブ人気エントリ";
Hatena.BookmarkWidget.sort = "count";
Hatena.BookmarkWidget.width = "";
Hatena.BookmarkWidget.num = 12;
Hatena.BookmarkWidget.theme = "notheme";
Hatena.BookmarkWidget.load();
</script>
まあ、これはシンプルでした。単にはてブで提供されているスニペットを貼り付けるだけです。ポイントとしては、提供されているテーマは一切使わないようにして自力でデザインを調整したり、生成された HTML で不要な部分を隠したりしている所でしょうか。

ソーシャルボタン領域
<div class="social-buttons">
<!-- hatebu -->
<script>
document.write(
'<a href="http://b.hatena.ne.jp/entry/' + location.href + '" class="hatena-bookmark-button" data-hatena-bookmark-title="' + document.title + '" data-hatena-bookmark-layout="standard-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>'
);
</script>
<script src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
<!-- twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-via="otchy">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="social-buttons">
<!-- facebook -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.7&appId=241048042598563";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
document.write(
'<div class="fb-like" data-href="' + location.href + '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>'
);
</script>
<!-- line -->
<span>
<script src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script>new media_line_me.LineButton({"pc":false,"lang":"ja","type":"a"});</script>
</span>
</div>
これはちょっと工夫が要るところです。まず各社から提供されているスニペットを貼り付けるのですが、全ページ共通のコードになるので、これらのスニペットは全て「今開いているページ」に対して動作して欲しいところです。Twitter や LINE (PC でページを開いている人には表示されていません) はそういう挙動が最初から選べるのですが、はてブや Facebook では、URL を指定してコードを生成する方法しか公式で提供されておらず、その部分には少し細工をしました。

具体的に言うと、それらのソーシャルボタンのスニペットの中で、ページ情報を指定している部分については、その都度 document.write で今開いているページの URL だったりタイトルだったりをオンザフライで出力してやることでどうにかしています。下記の Facebook のスニペットを改造した部分なんかがわかりやすいんじゃないでしょうか。
document.write(
'<div class="fb-like" data-href="' + location.href + '" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="false"></div>'
);
さて、ここまで来たらもう何の問題もありません。最終的に DNS の向き先を旧サーバから新サーバに変えて、世界中の　DNS キャッシュがクリアされるのを待つだけです。ようやくサーバの移行が完了しました。めでたしめでたし…といきたいところだったのですが、最後の最後に GAE 特有の (というかクラウド環境特有の) 注意点がありました。

長かったこのシリーズも次で最終回、GAE でうっかり発生してしまう微妙な課金をゼロにする方法を解説して終わりにしたいと思います。

カテゴリ: Development タグ: javascript gae