WordPressのちょっとしたTips [1] / hirok-k.com

WordPressでサイトを構築するにあたって、知っているとちょっとだけ便利なTipsをご紹介します。
第1回目はサイト全体のものをまとめました。

WordPressのちょっとしたTips　連載記事

WordPressのちょっとしたTips [1]　サイト全体のTips
WordPressのちょっとしたTips [2]　投稿周りのTips

目　次

1 パーマリンクに拡張子.htmlを付加
- 1.1 参考カテゴリー名をURLから削除
2 All in One SEOの「詳細を自動生成」で文字数指定
3 メニューにも公開状態を設定
4 Google LibrariesからjQueryを読み込む
5 読み込まれるCSSやJSからバージョンを削除

パーマリンクに拡張子.htmlを付加

SEO効果とかわかりやすさを考えると、慣れ親しんだhtmlをURLに付けたくなりますよね。その方法をご紹介します。

設定 > パーマリンク設定にある「共通設定」で「カスタム構造」を選択し、次のように設定します。

/%category%/%post_id%.html

1	/%category%/%post_id%.html

カテゴリー名を使用したくない場合は、

/%post_id%.html

1	/%post_id%.html

とします。
もちろん他の名前にも設定できます。

投稿名　/%postname%.html

1	投稿名　/%postname%.html

年月日　/%year%%monthnum%%day%.html

1	年月日　/%year%%monthnum%%day%.html

など

これでブログ投稿にはhtmlを付加することができましたが、残念ながらこの方法では固定ページには付加することができないため、手っ取り早くプラグインを使用します。

WordPress > .html on PAGES

このプラグインをインストールし、有効化。
これだけで固定ページにもhtmlを付加することができ、投稿と固定ページ双方にhtmlを付加できたことになります。

参考カテゴリー名をURLから削除

この設定をした場合に、カテゴリーページのURL
http://www.hogehoge.com/category/blog/
から邪魔な/categoryを削除し
http://www.hogehoge.com/blog/
とすることが可能です。

設定方法は簡単、「オプション」設定の「カテゴリーベース」に”.”を記述するだけです。

All in One SEOの「詳細を自動生成」で文字数指定

SEO対策プラグインとして最も有名なプラグインの１つ、All in One SEO。
多様な機能を誇り実績も多々あるこのプラグイン、非常に便利で「詳細を自動生成」オプションというのまであり、有難い限りです。
ですが、「詳細を自動生成」はmeta descriptionに自動的に本文内容から生成した内容を追加してくれるものの文字数が指定できないのです。

そこでこのプラグインを導入します。
WordPress > Aioseo Multibyte Descriptions
このプラグインは、All in One SEOでの日本語（を始めとするマルチバイト文字）の取り扱いを補強するためのものです。

このプラグインをインストールし、有効化。
設定 > Aioseo Multibyte Descriptionsでmeta descriptionの日本語での文字数を指定し設定するだけ。

これでmeta descriptionの文字数を設定できました。

メニューにも公開状態を設定

Jetpackを導入するとウィジェットに「公開状態」機能が追加され、ページごとに使用するウィジェットを設定できるようになりました。

これを同じくメニューにも「公開状態」機能が付けられたらいいなと思ったことありませんか？
そこでこのプラグインを導入します。

WordPress > If Menu

このプラグインをインストールし有効化すると、メニューに
Enable Conditional Logic（訳：条件分岐を有効にする）
が追加されるので、設定したいメニューアイテムでチェックボックスをONにします。

すると、Show（訳：表示）または Hide（訳：非表示）を選ぶプルダウンと、対応条件のプルダウンが表示されます。
対応条件は以下のとおりです。

条件	拙訳
User is logged in	ログインユーザーの場合
User is Admin	管理者の場合
User is Editor	編集者の場合
User is Sucscriber	購読者の場合
User is Author	投稿者の場合
User is Contributor	寄稿者の場合
Front Page	フロントページの場合
Single Post	個別投稿の場合
Page	固定ページの場合

残念ながら、現在のところ条件は１つのみ設定可能ですが、これでメニューにも「公開状態」を設定できるようになりました。
会員制サイトやビジネスサイトなどを構築する際には使えるのではないでしょうか。

Google LibrariesからjQueryを読み込む

WordPress本体に組み込まれているjQueryは圧縮されていないこともあり、圧縮版を使用したい、最新版や特定のバージョンを使用したいということがありますよね。

そんな時には3つの方法があります。

Use Google Librariesプラグインを使用する

最も簡単な方法です。
WordPress > Use Google Libraries
からプラグインをダウンロードし、有効化するだけ。
これで細かいバージョン指定はできないものの、Google LibrariesのjQueryとjQuery-uiのver.1系最新版を使用できます。

Head Cleanerプラグインを使用する

WordPressの高速化に必ずと言っていいほど登場するHead Cleaner。これにはGoogle LibrariesのjQueryとjQuery-uiのver.1系最新版を使用できる機能もついています。
WordPress > Head Cleaner
からプラグインをダウンロードし、有効化。

設定 > Head Cleaner設定で「Google Ajax Libraries を利用する」をONにするだけ。

これで細かいバージョン指定はできないものの、Google LibrariesのjQueryとjQuery-uiのver.1系最新版を使用できます。
ですが、使用するテーマによっては利用できない場合がありますので、ご注意ください。

header.php、またはfooter.phpに直接記述する

若干の面倒さがありますが、バージョン指定もできるなど最も柔軟性の高い方法です。
使用しているテーマのheader.php、またはfooter.phpでjQueryやjQuery-uiを読み込ませたい箇所に次のコードを記述するだけです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

2014/01/12現在、jQueryは（IE6/7/8では使用不可となっているver.2.0.3を除き）ver.1.10.2が最新版、jQuery-uiはver.1.10.3が最新版となっていますが、より細かくバージョン指定をしたい場合は、例えば次のように指定します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

この例では1.8系の最新版を読み込むようになっていますが、この箇所を変えることでより細かい指定が可能となります。

また蛇足ながら非同期読み込みを行う場合は、次のようにasync属性をscriptタグに追加します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" async="async"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" async="async"></script>

1 2	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" async="async"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" async="async"></script>

読み込まれるCSSやJSからバージョンを削除

WordPressでサイトを構築すると、読み込まれるCSSやJSにバージョン情報が付加されていることが多々あります。
例）jquery.js?ver=1.10.2
このバージョン情報の削除には、このコードをfunctions.phpへ追加します。

function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );