WordPressでサイトを構築するにあたって、知っているとちょっとだけ便利なTipsをご紹介します。
第1回目はサイト全体のものをまとめました。
WordPressのちょっとしたTips 連載記事
WordPressのちょっとしたTips [1] サイト全体のTips
WordPressのちょっとしたTips [2] 投稿周りのTips
目 次
パーマリンクに拡張子.htmlを付加
SEO効果とかわかりやすさを考えると、慣れ親しんだhtmlをURLに付けたくなりますよね。その方法をご紹介します。
設定 > パーマリンク設定にある「共通設定」で「カスタム構造」を選択し、次のように設定します。
1 |
/%category%/%post_id%.html |
カテゴリー名を使用したくない場合は、
1 |
/%post_id%.html |
とします。
もちろん他の名前にも設定できます。
1 |
投稿名 /%postname%.html |
1 |
年月日 /%year%%monthnum%%day%.html |
など
これでブログ投稿にはhtmlを付加することができましたが、残念ながらこの方法では固定ページには付加することができないため、手っ取り早くプラグインを使用します。
このプラグインをインストールし、有効化。
これだけで固定ページにもhtmlを付加することができ、投稿と固定ページ双方にhtmlを付加できたことになります。
参考 カテゴリー名をURLから削除
この設定をした場合に、カテゴリーページのURL
http://www.hogehoge.com/category/blog/
から邪魔な/categoryを削除し
http://www.hogehoge.com/blog/
とすることが可能です。
All in One SEOの「詳細を自動生成」で文字数指定
SEO対策プラグインとして最も有名なプラグインの1つ、All in One SEO。
多様な機能を誇り実績も多々あるこのプラグイン、非常に便利で「詳細を自動生成」オプションというのまであり、有難い限りです。
ですが、「詳細を自動生成」はmeta descriptionに自動的に本文内容から生成した内容を追加してくれるものの文字数が指定できないのです。
そこでこのプラグインを導入します。
WordPress > Aioseo Multibyte Descriptions
このプラグインは、All in One SEOでの日本語(を始めとするマルチバイト文字)の取り扱いを補強するためのものです。
このプラグインをインストールし、有効化。
設定 > Aioseo Multibyte Descriptionsでmeta descriptionの日本語での文字数を指定し設定するだけ。
これでmeta descriptionの文字数を設定できました。
メニューにも公開状態を設定
Jetpackを導入するとウィジェットに「公開状態」機能が追加され、ページごとに使用するウィジェットを設定できるようになりました。
これを同じくメニューにも「公開状態」機能が付けられたらいいなと思ったことありませんか?
そこでこのプラグインを導入します。
このプラグインをインストールし有効化すると、メニューに
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 | 固定ページの場合 |
残念ながら、現在のところ条件は1つのみ設定可能ですが、これでメニューにも「公開状態」を設定できるようになりました。
会員制サイトやビジネスサイトなどを構築する際には使えるのではないでしょうか。
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でjQueryやjQuery-uiを読み込ませたい箇所に次のコードを記述するだけです。
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が最新版となっていますが、より細かくバージョン指定をしたい場合は、例えば次のように指定します。
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タグに追加します。
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へ追加します。
1 2 3 4 5 6 7 |
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 ); |
テーマをカスタマイズする際は、jQueryのバージョンによって動かなくなることもあるため、カスタマイズ時のデバッグなどは一旦このコードを停止することをおすすめします。
参考 How to remove WordPress version parameter from JS and CSS files