タグ: wordpress-theme

SoundCloud にアップロードしたトラックを WordPress のブログ記事に埋め込むには公式の SoundCloud Shortcode プラグインが便利です。 しかし、iOS の Safari でも表示可能なように HTML5 で出力するには気をつけなければならない点があります。 以下手順をまとめます。

SoundCloud プラグインをインストールすると「設定」－「Sound Cloud」でセットアップ画面を表示できるようになります。 まず、この中で Widget Type を HTML5 に選びます。

しかし、これだけでは不十分です。 リンクの形式は http://soundcloud.com/hetarena-com/saw-square ではなく、http://api.soundcloud.com/tracks/69089521 の形式でなければなりません。 この数字を見つける簡単な方法としては、SoundCloud.com 上の該当トラックで「Share」－「WordPress Code」で示されるコードを確認すれば良いです。

「WordPress Code をそのまま貼り付けては？」という声も聞こえてきそうですが、油断すると「iframe="false"」というパラメータが入っていて Flash の埋め込みになってしまいます。 ちなみに私は設定画面で Auto Play = false、Show Comment = false として以下のようなタグコードを埋め込んでいます。

[soundcloud]http://api.soundcloud.com/tracks/66034316[/soundcloud]

というわけで見やすくなったので「ソフトシンセ時代のシンセサイズ入門」を是非ご覧ください。 あと、リバースシンバルの作成例つきの「Groove Agent ONE でマイキットをつくろう」も！

以下の記事を参考にさせていただきました。

• soundcloudとwordpressを連携できるプラグイン「SoundCloud Shortcode」(WeBridge)

Twenty Twelve は近々リリースされる WordPress 3.5 の新しい標準テーマで、3.5 のよりも一足先にリリースされています。 このブログもこの 11月より Twenty Twelve ベースのテーマに衣替えしました。 その中で気付いた点などまとめましたので、Twenty Twelve を使ってみようという方は是非ご一読ください。

Mobile-First Responsive Web Design

Twenty Twelve はレスポンシブ Web デザインを採用しており、更にモバイルファーストのコンセプトで実装されています。 具体的にどういうことかと言うと、CSS のメディアクエリを使ってブラウザのサイズによって表示内容を変えているのですが、スタイルシートファイル (style.css) の中で以下の順でスクリーン用スタイルが定義されています。

1. 幅の狭いスクリーン用のスタイルをメディアクエリなしで定義
2. min-width: 600px を指定して幅広いスクリーン用のスタイルを定義
3. min-width: 960px を指定して更に幅広いスクリーン用のスタイルを定義。ここからは背景が広がるだけ。

つまり一番幅の狭いスクリーン (＝モバイルデバイス) 用の定義を最初に行い、スクリーン幅の広いデバイスについては追加でスタイルを足すというやりかたです。 何故、このようにモバイルデバイスを優先するかというのは様々なところ (例えばここやここ) で説明されているのでここでは繰り返しません。 注意したいのは PC 用のレイアウトを行うときはメディアクエリの条件式でくくられたスタイルに手を入れなければならないということです。

IE7/IE8 ユーザーは Twenty Twelve Version 1.0 だと悲しいことに

ここでピンと来た方もいらっしゃるかも知れませんが、Internet Explorer の 8 以下のバージョンはメディアクエリをサポートしていません。 なので、Twenty Twelve の Version 1.0 を使ったサイトを IE7/IE8 でブラウジングするとメニュー表示がモバイル用と同じになっちゃいます。 このあたりデモサイトではきちんと表示されるのですが、あれはどうやら手が入っているようです。 普通に Version 1.0 を入れると IE7/IE8 では下のような表示になります。 メニューに注目してください。 (それでも微妙な IE 個別対応はしているので 2カラムレイアウトにはなっています)

Twenty Twelve 1.0 をリリースした時点では IE7/IE8 に関してはモバイルデバイスと同等のルックスを提供する方針だったようです。 しかし、私のサイトの場合、閲覧に使われているブラウザの中での IE8 以下バージョンの割合はサイトアクセス全体の 2割強で無視できない数字であり、きちんとしたメニューバーを表示したいところです。 これはグローバルで見ても同様だったようで、 最初の方針は不評を買い結局 IE8/IE7 のナビゲーションメニューがきちんとサポートされることになりました。 WordPress 3.5 公式リリースには反映されるはずですが、すぐに対応が必要な方は既に修正済みとなっている WordPress 3.5β2 の中の Twenty Twelve のみを取り出して使うと良いでしょう。 (3.5β2 そのものを使うことはお勧めしません。もっと言うと多分あなたがこの記事を見ている頃には 3.5 がリリースされているような気がしますw (注: 3.5 は 12/5 リリース予定))

IE6 はさらに悲しい

更にいまだに IE6 を使用されている方々もいます。 そこで手元の IE6 を使ってテストしたところ、Twenty Twelve テーマそのままではフォントの問題で日本語が表示されませんでした。

いまどき IE6 を使っている方々はきっとレイアウトなど気にしないのだろうと推測できますが、さすがに内容が見えるぐらいにはしておきたいところです。 「スターハック」という IE6 のみのスタイルを変える有名なテクニックを使ってフォント指定に ‘ＭＳ Ｐゴシック’ を追加します。 なお、Twenty Twelve のスタイルシートに直接手をいれるのではなく、まずは子テーマを作ってカスタマイズするのがお勧めです。

* html body {
  font-family:  "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", Osaka, Helvetica, Arial, sans-serif;
}

* html body.custom-font-enabled {
  font-family:  "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", Osaka, "Open Sans", Helvetica, Arial, sans-serif;
}

* html .entry-content code,
* html .comment-content code,
* html .entry-content pre,
* html .comment-content pre {
        font-family: "\FF2D\FF33\20\FF30\30B4\30B7\30C3\30AF", Osaka, Consolas, Monaco, Lucida Console, monospace;
}

ついでに Osaka フォントも加えて、(意味がないと思われる) 元のフォント指定も残していますが、この辺は詳しくないし、所詮 IE6 用スタイルということで深く考えないことにします。 また、style.css の先頭に念のため以下の行を入れておきました。

@charset "utf-8";

これで無事 IE6 でも日本語が表示されるようになりました。

フォントサイズ指定について

style.css の中を覗いてみるとフォントサイズの指定には rem が使われています。 これは CSS3 から追加された単位で、root + em すなわち root 要素のフォントサイズに対しての相対値になります。 最初に以下のように指定されているので、1rem = (16px * 87.5%) = 14px となります。 ここで 16px は (最近の主要な) ブラウザのデフォルトフォントサイズです。 このようにユーザー環境のフォントサイズを考慮して絶対値でなく相対値でサイズ指定するのが最近の標準的なやり方のようです。

html {
        font-size: 87.5%;
}

さて、これ以降実際のサイズ指定には 1つの要素に対して下のように px 指定と rem 指定の 2つの指定が行われています。

    font-size: 11px;
    font-size: 0.785714286rem;

このように指定方法の異なる 2行をこの順で書いておけば rem を認識しない古いブラウザは px 値、認識すれば rem 値でスタイリングされます。 rem 値が一瞬よくわからない小数値になっていますが、先の 1rem = 14px で計算した値となっています。 11/14 ということですね。 自分で手を入れるときもこのスタイルを踏襲しましょう。

幅の指定について

もう一つわけのわからない小数値に幅の指定があります。 こんな感じの記述です。

    width: 65.104166667%;

Twenty Twelve では 960px 以上になるとコンテンツの幅は広がらず背景が広がるようになっています。 レスポンシブであるために上のように width が％値で指定されていますが、これは 960px になったときのピクセル値を元に計算された値で、この例では最大表示で (960px x 0.65104166667 = 625px) ということです。

IE 対応

β2 での変更で HTML タグの記述は以下のように出力されます。

<!--[if IE 7]>
<html class="ie ie7" dir="ltr" lang="ja">
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" dir="ltr" lang="ja">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html dir="ltr" lang="ja">
<!--<![endif]-->

ここで指定されている .ie/.ie7/.ie8 をセレクタとして使って実際のスタイリングは css/ie.css の中で行われています。 .ie は IE7 と IE8 の 2つに対してのみ適用したいスタイルを指定するときに使います。 先のスターハックと合わせれば IE6/IE7/IE8 向けの個別調整ができますね。 まあ、Mobile First Responsive Web Design の考え方からするとピクセル単位の配置にまでこだわる必要はないと思うので、ほどほどにして良いと思います。

その他

Twenty Twelve は HTML のソースも CSS ファイルも比較的読みやすいと思いますので、気に入ったら是非カスタマイズに挑戦してみてください。 それと、ページ編集画面からテンプレートとして ‘Front Page Template’ や ‘Full-width Page Template, No Sidebar’ が選べるようになっていますが、これらのソースを見ると Widget エリアの使い方などの参考になると思います。

さて、このブログのテーマも Twenty Twelve ベースのものに変えました。 しかし、広告を入れると元があっさりしすぎているのでもう少し線を濃くしたりする等の調整が必要なようです。 また、そもそも英語で見栄えが良くても日本語になっただけで印象が変わってしまう、というのもあります。 まだまだ調整は続く、という感じです。

また、さんざん Mobile First Responsive Web Design と強調した割りに、結局スマートフォン向けは WPtouch Pro の使用を継続しています。 Twenty Twelve のモバイル向け表示時のメニューボタンが気に入らないのと、モバイル回線でのレスポンスがどうなるか見えないのが理由ですが、折を見て一本化できるか検討してみようとは思っています。 ナビゲーションメニューのスタイリングの仕方を覚えねばということですかねぇ。

はじめに

WordPress のカスタマイズを考えている方向けに以下の項目をまとめてみました。

• 自分自身が WordPress でカスタマイズを始めた頃に、知っていたら作業が捗っただろうと思われること
• WordPress サイト構築作業関連での私の個人的なお勧め

WordPress を導入しようと考えているぐらいなので、IT系のスキルがそれなりにある読者を前提としています。 また、ブログ用途として使おうと考えている方向けです。

CSS 中心のカスタマイズがお勧め

世の中には自作テーマに関するブログ記事が溢れていますが、まずは標準テーマの Twenty Ten や Twenty Eleven をベースに CSS で外観を変更するのがお勧めです。 ご存知のように Web ページの論理的構造は HTML、視覚的な構造は CSS という役割分担になっていますが、ブログの論理構造なんてたかが知れているわけで、特殊用途でない限り標準テーマをベースにすれば十分です。 もちろん、余裕があって興味のある人は一からテンプレートを作れば良いと思うのですが、その時も標準テーマの構成を理解しておくことが役に立つはずです。

一からのテーマ作成をお勧めしない理由はもう一つあります。 WordPress を使ったサイト構築に不可欠な各種プラグインは簡単に言ってしまえば、フック／コールバック関数の固まりなのですが、呼ぶべき関数を適切な場所で呼んでいないテンプレートではプラグインが動作しなくなってしまいます。 こんなマナーを覚えてフルスクラッチでテンプレートファイルをつくるよりは標準テーマの style.css の修正を集中してやった方が効率はずっと良いです。

CSS をいじろうとすると、どんな id、class が使われてマークアップされているかが重要ですね。 Twenty Ten でどうなっているかを別記事にまとめます (→ 追記: グズグズしていたら Twenty Twelve の時代になってしまったので企画倒れとなりました…)。 Twenty Eleven をベースとしたい場合は自分で調べてみてください。

ブログの外観は大事だと思うので、CSS のカスタマイズは気が済むまでやりましょう。 私の場合、スキルと時間が足りてないので、このあたりで妥協してしまっていますが…。

ちょっと断り書き

以下、公式情報へのリンクを記載していますが、残念ながら日本語化された公式情報は英語のものよりも古いことが多い (ひどい時は日本語版が存在しない) ので、英語版の方をリンクしておきます。 必要ならば、ページに表示されている「日本語」を辿って日本語版の方も確認してみてください。

テンプレート階層

それでも CSS で全て解決するわけではないので、テンプレートファイル (*.php) に手を入れる必要は出てきます。 広告入れたり、アクセス解析入れたり、みたいな時ですね。

で、この時にどこを直したら良いかを知るにはテンプレート階層とモジュール構成を理解しなければなりません。 表示されるページの種類によって使用されるテンプレートファイルが異なるのですが、このテンプレートファイルの選択は階層的に行われ、最低 index.php があればページの表示はできるという構造になっています。 まずすべきなのは公式情報を読み、この図の意味を理解することです。

Twenty Ten も Twenty Eleven もシングルポストなら single.php、固定ページなら page.php が使用されます。 ここで、例えば page.php ファイルを削除してしまうと、固定ページの表示には index.php が呼ばれることになります。 また、特定の固定ページのみ異なるテンプレートを使用したいのであれば、page-$slug.php か page-$id.php ($slug はスラッグ、$id はページ ID) を新たに作成すれば良いことがわかります。

モジュール化

しかし、標準テーマのディレクトリには、先の階層図には記載されていない名前のファイルが存在します。 これがどのように使用されるかを把握するには、テンプレートファイルのモジュール化についての理解が必要です。 テンプレートファイルはモジュール化されていて、例えば single.php でも page.php でもヘッダー表示には get_header() が呼ばれ header.php が使用されます。 (ここでいう「ヘッダー」は HTML の <head> ＋ <body> の最初、すなわちページ上部までを指します)

なので、ページ上部に広告を表示したければ、header.php を編集するだけで、サイト全体に表示されるようになります。 このように get_* として使えるのは header/footer/sidebar があります。

ただし、標準テンプレートの構成を理解するには header/footer/sidebar だけでは不十分で更に get_template_part() を使った呼び出しを理解する必要があります。 例えば、Twenty Ten の loop-single.php は single.php 内のループ処理中で以下のように呼び出されています。

get_template_part( 'loop', 'single' );

同様に Twenty Eleven の single.php を見てみると、投稿表示部分では以下の形式で投稿のフォーマット (フォーマットについては後述) に従ったマークアップ用テンプレートファイルを呼び出しています。

get_template_part( 'content', get_post_format() );

このあたりの構造を理解してテーマディレクトリ内の各ファイルがどんな時に使用されるかを把握できれば、自ずと編集対象のファイルはわかるようになります。 他のファイルをインクルードする方法の詳細は公式サイトのこのページで解説されています。

メニューをカスタマイズしよう

メニューについても様々なプラグインを使いたくなってしまう人が多い様ですが、標準テーマそのままでもメニューを階層化してドロップダウンメニューを使用することができます。 メニュー設定を行っていない状態だと固定ページ一覧が表示されてしまうので、「使えない」と思っている人もいるのかも知れませんが、WordPress 管理ページの「外観 (Appearance)」－「メニュー (Menus)」からカスタムメニューを設定すれば簡単に階層化されたメニューを使い始めることができます。

階層化するには設定画面上のインデント配置で表します。 詳しい設定方法は WordPress.com に書かれていますが、操作は簡単です。

この hetarena.com も階層メニューを使用していますが、下図は「まとめ記事」－「DAW」－「Cubase」と３階層となっている例です。 この例の場合「まとめ記事」と「DAW」は「カスタムリンク」で「URL」を「#」に設定し、クリックしても何も起こらないようにしています (注: 記事執筆時の状況)。 あとは CSS で外見を整えれば十分ではないでしょうか。

子テーマの使用

あるテーマを元としてカスタマイズする場合、元テーマの子テーマとして作成し、変更を加えたいファイルのみを新テーマとして管理する方法があります。 標準テーマをベースにする場合は、もちろんこの子テーマ機能を使うことをお勧めします。 私も Twenty Ten の子テーマを作成して使っています。

ところで子テーマ作成時に１つ注意点があります。 大抵のファイル (style.css も含む) は親テーマのものが子テーマディレクトリ内に作成されたものに置き換わるのですが、functions.php については子テーマの functions.php がロードされてから親テーマの functions.php もロードされます。 ですので、差分のみを子テーマの functions.php に追加しなければなりません。

ついでに言うと functions.php に同じ名前で関数重複があると、管理画面含めて WordPress サイトの表示が真っ白になってしまいます！ こんな時は焦らず functions.php を元に戻してアクセスし直せば復旧します。 ちょっと怖いですね。(はい、怖かったです)

子テーマ作成についても詳しくは公式情報ということで。 公式情報にも記載されていますが、style.css については以下のように親テーマの CSS ファイルを import した後、上書きしたい項目を列挙する形にしておくと、管理はしやすいと思います。

@import url("../twentyten/style.css");

HTML を直書きしたい

多分 Visual なエディタよりも HTML を直接書いて、改行も <BR> タグでコントロールしたい、という人はそれなりにいるんじゃないかと思います。 そんな人は HTML エディタに切り替えて記事を書くと思いますが、これだけでは改行箇所に <BR> が挿入されるのを防ぐことはできません。 functions.php に以下の記述が必要です。

<?php
function mywpautop( $pee ) {
  return wpautop($pee, 0);
}        

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
add_filter   ( 'the_content', 'mywpautop' );    
add_filter   ( 'the_excerpt', 'mywpautop' );    
?>

詳しくは wpautop() の解説をご覧ください。

jQuery ファイルのインクルード

そして、JavaScript をいじりたくなり jQuery をインクルードするようなこともあると思いますが、注意してください。 WordPress のディレクトリには既に jQuery の .js ファイルが含まれていて、これを作法に従って呼び出す必要があります。 何故ならばプラグインが jQuery を使ったりしていてもインクルードするのを 1回にするためです。

.js ファイルをインクルードするには wp_enqueue_script() を呼び出します。 jQuery を使うには functions.php 内に以下を記述します。

wp_enqueue_script( 'jquery' );

WordPress に付属してくる jQuery ではなく、他の jQuery (例えば Google の CDN 版) を使用したいときの例は wp_enqueue_script() の解説ページで紹介されています。 (2013.3.23 追記: 最近内容が変わったようなので、CDN 版を利用したいときはこちらを参照してください)

ちなみに自作スクリプトをテーマファイルフォルダの下に置いて使うには以下のような呼び出し方ができます。 (pathto はテーマファイルが格納されるフォルダ配下のサブフォルダ名)

<script type="text/javascript" 
  src="<?php echo get_stylesheet_directory_uri(); ?>/pathto/yourscript.js"></script>

ちなみに get_template_directory_uri() だと親テーマのディレクトリ名を返してしまうので子テーマ作成の際は注意が必要です。 また、配布できるぐらいのテーマ作成を目指す人は自作スクリプトも wp_enqueue_script で呼び出すクセをつけておいた方が良いでしょう。

コンテンツ (投稿・ページ) の種類を増やしたい

このセクションの話は応用なので、今すぐには必要ないかも知れませんが、覚えておいて損はないと思います。 通常のブログ投稿と告知情報の扱いを分けたいとか、ただのテキスト記事とビデオ関連記事で見せ方を変えたい時などに使用できる機能として「カスタム投稿タイプ」と「フォーマット」という２つの機能があります。 本来、この２つはそれぞれ異なる用途向けの機能なので、以下のように覚えておきましょう。

• カスタム投稿タイプは通常の「投稿 (post)」以外のものをつくりたい時に使う機能です。(名前がミスリーディングですが)
• フォーマットは「投稿」の種類を設定する機能です。 RSS フィードにそのコンテンツを載せたいのであれば、それはカスタム投稿タイプでなくフォーマット機能を使うべき状況だと思われます。

カスタム投稿タイプであれば、テンプレート階層で single-$posttype.php というファイルが使用されるので、種類に応じた扱いが可能です。 フォーマットであれば、先に紹介した Twenty Eleven の使用例が参考になります。 またフォーマットに関しては post_class() (＝ 投稿を囲む div に設定されるクラス) で返される CSS class の中にフォーマットを識別するものが含まれるので、新たな .php ファイルを作らずにフォーマット毎に CSS レベルで異なるスタイルを適用するという手もあります。

公式情報 (カスタム投稿タイプ、フォーマット) の他に、以下のリンクでもわかりやすく使用方法が解説されています。

• 「WordPressをカスタマイズするなら絶対覚えておきたい条件分岐やカスタム投稿タイプなどいろいろ」 (Web Design Recipes)
• 「お手軽WordPress Tips：1行のコードで追加できる便利な新機能『投稿フォーマット』を使ってみよう」 (KACHIBITO.net)

最後にもう少し

• WordPress プラグインはスマホアプリと同様、必要なものだけ導入することをお勧めしておきます。
• SQL がわかる人はここら辺を見てデータベースを活用すると良いと思います。
• スマホ対応はやっておいた方が良いでしょう。 無料の WPtouch を使う人も多いと思いますが、私はせっかく設定したカスタムメニューを使うために WPtouch Pro を購入してしまいました。
• ガラケー対応はどうだろう…。 やるならば Ktai Style を使用することになると思いますが、そろそろ割り切っても良い頃のような気もします。

というわけで WordPress についてまとめてみました。 この記事が少しでもお役に立てれば幸いです。