どのページを見ているかをわかりやすくする

使用するクラス値： current-menu-item

このブログでもTOPのタブに実装させているこの仕組み。
WordPressでは「クラス名」さえ知っていれば簡単に実装することができます。

グローバルナビのソースを見てみると、選択されているページのli部分に「current-menu-item」というクラス値が追加されているのがわかります。

この機能は「外観＞メニュー」から作成されたグローバルナビであれば、ほぼ間違いなく追加される様になっています。
ですので後はCSSで選択中のナビゲーションのスタイルを新しく設定するだけでOKです。

これでグローバルナビ内で、「今どのページが見られているか」をわかりやすく表示させることができます。

Function Reference/wp nav menu « WordPress Codex

投稿した画像のスタイルを編集する

使用するクラス値： aligncenter / alignleft / alignright / alignnone / wp-caption / wp-caption-text

WordPressはデフォルトで投稿した画像に一定のスタイルが付くようになっています。
そしてここでも「クラス値」を利用することで、簡単に記事の画像スタイルを編集することが可能になります。

投稿画像に使用されるクラス値は、「メディアを追加」をクリックすると表示される「メディアを挿入」の右下で選択することができます。

使えるクラス値と「配置」は以下のような関係です。

この他に「キャプション」を利用した際に生成される「.wp-caption」「.wp-caption-text」というクラス値もあります。
この２クラスと画像は下の画像のように「.wp-caption」の子要素に画像と「.wp-caption-text」が配置される関係になります。

画像の配置の調整は「.align」系のクラス値を、画像の装飾関係の調整は「.wp-caption」系のクラス値を利用することでCSSでのカスタマイズができるようになります。

サイドバーウィジェットをカスタマイズする

使用するクラス値： widget / widget_text

サイドバーのコンテンツは「外観＞ウィジェット」を利用して追加・編集するやり方が一般的です。
そしてこの「ウィジェット」を利用した場合、こちらもオリジナルのクラス値を自動で出力するようになっています。

「ウィジェット」で生成されるクラス値は「.widget」と「.widget_text」の２種類です。

この２つのクラス値にCSSを適用しているテーマは意外と少ないので、サイドバーのコンテンツをカスタマイズする際には積極的に使用したいクラス値でもあります。

最後に

WordPressでデフォルトで出力されるクラス値を紹介してまいりましたが、最後に注意点を１つ。
WordPressのプログラムはカスタマイズ性が非常に高いため、生成されるクラス値も自在に書き換えることができます。

このため公開されているテーマファイルを利用した場合、今回紹介したようなクラス値が出力されない場合もあります。

この場合はphpファイルあるいは「ChromeDeveloperTools」「firebug」などを利用して生成されているクラス値を直接確認することになりますので、ご注意下さい。