CLOSE
CLOSE

WordPressテーマ自作戦記 第二回 「引き継ぎ篇」

WordPress Born In Texas
テーマ自作も無謀だったのに、そのまとめ記事を書くなんてそれ以上に無謀じゃないだろうか。二回目にして早くも暗礁に乗り上げかけている@knk_nです。
本でとりあえず基本を抑えたところで改めて以前使っていたテーマを見てみました。改造しきれない中途半端なものではあったものの、その中にはその時期に苦労して作った部分もあり現在のテーマに引き継げたり応用できそうだったので再利用。
今回そのあたりをまとめ合わせに紹介します。まだまだ引き伸ばすんだからね(`ω´)グフフ

スクロールするソーシャルボタンボックス

今や欠かすことのできないブログパーツのひとつであるTwitterやFacebookなどのソーシャルボタン。利便性とスタイリッシュが両立している珍しいデザイン。
前のテーマでもいちおう使ってはいましたが記事で取り上げるのは今回が初めてでしょうか。
スクロールしてもついてくる!ブログにソーシャルボックスをつけよう。 | ウェビメモ
WordPressにプラグインを利用しないでソーシャルボタンを設置する方法 | moonblack
最初は私も枠を付けようかなと思ったのですが無いほうが私のページではキレイに見えたので枠は消して、背景もサイトの背景に合わせています。
まるでボタンがついてくるみたい!

サムネイルの設定

WordPressでは記事を投稿するときに「サムネイル用画像」というのを記事内の画像とは別にアップロードすることで、「<?php get_thumbnail() ?>」とか「<?php the_post_thumbnail(); ?>」とかでサムネイルを表示することができるようになっています。
しかし私はメンドウだったのでサムネイルというやつを一回も使ってことがありませんでした。とくに今使っているブログエディタ「MarsEdit」でサムネイルアップロードする方法わからん。
「Mars Edit」便利だから使ってるけどね。
MarsEdit - Red Sweater SoftwareMarsEdit 3.4.2

価格: ¥3,450 (記事公開時)
カテゴリ: ソーシャルネットワーキング
App Storeで詳細を見る。
そんなわけでサムネイルを使っていない私ですがWPtouch時代に、

の属性の中で、src属性のすぐ後にalt属性をもっているものの中で先頭の画像をサムネイルとして表示する。
via: WPtouchカスタマイズ番外編 -サムネイル用画像をコントロールしよう-

と、擬似サムネイルを使う方法を編み出していたので、今回サイドバーの最新記事表示に利用することにしました。たまたまWPtouchで使っていただけなのでWordPressでも使えるしそれ以外でもフツーに使えるんじゃないかな。
そんなわけでこれからもサムネイルを用意することはないと思う。

FacebookのOGP設定

Facebookからの集客を倍増させる(らしい)というFacebook OGP。本当はこれも引き継ぐだけでよかったハズなんですが、Facebookのデバッガーとで確認すると設定が間違っているようなのでこれはイチからやり直しです。
また@tomos2006さんのページのお世話になっちゃいました。
しかし月間10万PVは遠いなァ… 今年中には…などと夢を語ってみる。
参考: 月間10万PVに貢献!Facebookからのアクセスを5倍に増やす方法 | gadget or gimmick
今回テーマを自作するにあたっては「この機会にプラグインをできるだけ減らしてやろう」という狙いがありました。
そこでFacebookのOGP設定も直接コードの埋め込みで済ませることに。
FacebookのOGP設定にも上で紹介した擬似サムネイルを使って

<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:image" content="<?php echo new_catch_that_image(); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="fb:app_id" content="FacebookのAppID" />

ヘッダ内に追加するコードはこんな感じ。あとはを<html>を

<html xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#">

に置き換えればオッケー。

SimpleReachも再導入

右下からスルッと出てくるランダム記事表示のブログパーツ。こちらもコードの埋め込みでプラグインは使わない。
実際にジャマだという声が多ければ外すのもやぶさかではないようなあるような。
右下は基本的に空きスペースなのでそれほどジャマにはなっていないと思うけどどうなんだろうね。
参考: [Blog]横からぬるっと出てくる記事表示ブログパーツ「simple reach」を導入してみました

あとはCSSとか

以前使っていたスタイルシートからハイライトなどの部分のスタイルシートをコピペ。少しいじったりしてこれはOK
またワタクシAmazonとかの商品リンクに、カエレバヨメレバといったブログパーツを利用しているのですが、以前の寄稿のときに@goryugoさんより

ヨメレバカエレバもstyle=とか無しにして、外部CSSにしておいた方がのちのち便利よ。HTMLの柔軟性だいじ
by @goryugo

とのアドバイスを受けておりました。ヨメレバ・カエレバの外部CSSもこれを機に外部CSSに移して今後htmlではclassだけ残すことに。
AppHtmlやAppStoreHelperなどは以前から外部CSSでやっていたので(オイ
こっちはコピペでおk。

おわりに

他にもGoogle AnalyticsやFacebookのLike Boxなどのコード類をはじめ細かい部分では以前のテーマから引き継いでいます。
ゼロからテーマを作り不必要なものが減ったので、その分必要なものを移行させるのもかなりラクになりました。前のテーマではいらんコードばっかだったけど消すのが怖くて消せなかった!
もちろん全部を引き継いだわけではありません。引き継ぐにあたってはやはり「必要かどうか」を考えて行ったつもりです。あとできるだけプラグインを使わずにコードの埋め込みで済むものについてはそっちで済ますといった部分もかなりこだわっています。
それにしても引き継げる部分が少しでもあると、たとえ中途半端でも前からテーマをいじってきた甲斐があったというものですね。
次回はいよいよ新しく追加したシリーズの紹介です。お楽しみに!(ハードルは低めで)

NEW POSTS 最新記事を読む