サクッと使えた！サイト移行前やWordPressテーマ作成時に知っておきたい小技

• 作成：2015/02/23
• 更新：2016/06/29
• WordPress >

本番サーバ移行前に何をすればよかったのか確認しておきたい、自作テーマに記述し忘れたことはなかっただろうか。今回はサイト移行時や構築時に毎回確認してしまう使用頻度の高い小技をまとめました。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

移行中

• １．移行中にメンテナンス画面を表示する
• ２．旧url から新url へのリダイレクト
• ３．一時的にキャッシュを制御させる

パフォーマンス

• ４．非同期で読み込む
• ５．jQueryや外部 JavaScript の競合を避ける
• ６．旧IEでCSS3を再現
• ７．問い合わせのコンバージョン設定

functions.php に追加しておきたいもの

• ８．メディアアップローダーを自作テーマに組み込む
• ９．ビジュアルエディタをカスタマイズ
• １０．RSSにサムネイル画像を表示
• １１．管理画面でコンテンツの文字数表示
• １２．pタグを削除
• １３．コメント欄の下にある使えるHTMLタグを消す
• １４．固定ページに拡張子を追加する
• １５．ギャラリー機能のカスタマイズ

移行中

１．移行中にメンテナンス画面を表示する

.htaccessを準備してサイトをメンテナンスモードにする方法。メンテナンス時は 503を表示。メンテナンスページを表示するページを用意してhtaccessで全てリダイレクトさせ、自分とクライアントさんのIPのみ閲覧可能にします。使用頻度が高いのでメモ。完全に移行したら頭に「#」をつけてコメントアウト。

• Web サイトのメンテナンス中画面の出し方 | dogmap.jp

２．旧url から新url へのリダイレクト

テストサーバにサイトを設置したものの、クライアントさんに他のフォルダは見せないようにしたい。そんな時はこちら。

もう一つは移行時に行いたい301を使った個別ページやディレクトリを変更したい時のリダイレクト。旧サイトの消したはずのページにも検索エンジンやブックマークからアクセスされるので、以下の [R=301,L]を使って処理をしておきます。

• .htaccess、トップ以外のアクセスをトップにリダイレクトする方法 - 今日のプリン言 / イラストレーターみやびの漫画館 作品集 - 月の高いところ
• サイトリニューアル時の301リダイレクト、.htaccess記述方法いろいろ｜SEOまとめ

３．一時的にキャッシュを制御させる

「ctrl + F5」押してくださいと言う前に、サーバにサイト移行直後くらいまで「header.php」などに記載しておきたいキャッシュ制御。meta要素を使って文書がキャッシュされないように指定します。

• ブラウザでキャッシュをさせない方法いろいろ | kotaログ

パフォーマンス

４．非同期で読み込む

本番サーバーに移行後、あれ？遅いとなる前に。表示速度の問題を少しでも改善させるため、script要素にdeferとasync属性を記載する方法。

非同期にすることによりJavaScriptの読み込みが完了していなくても他の部分を読み込むことが可能になります。こちらはdeferを使い、コンテンツの表示が終わったあとに、そのJavaScriptを実行させる方法。ユーザーの体感速度やページを早く表示されるために知っておきたいこと。defer/asyncの違いはscriptのdefer/asyncを理解し、ページの高速化方法を探る | ゆっくりと…にて確認。

• ユーザーの体感速度を高めるためのJavaScriptチューニング（前編） | HTML5Experts.jp

５．jQueryや外部 JavaScript の競合を避ける

functions.php に記述する場合は、パラメータを「true」に変更します。

• Function Reference/wp enqueue script « WordPress Codex

ヘッダーに直接記述する場合以下をwp_head()の直前に書くことで、ほかのプラグインと競合せずに、jsやjQueryファイルを読み込むことができます。

<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>"

google CDNのライブラリ等のみ読み込ませたい場合は、jsのフックを解除するwp_deregister_scriptを使います。

• WordPress 同梱の jQuery 以外を使う方法 | dogmap.jp

６．旧IEでCSS3を再現

IE向けのCSS3再現ライブラリを使うことでCSS3のborder-radiusなども簡単に表現できます。こちらCSS3 PIEの設置方法。

• IEでCSS3が使える！「Selectivizr.js」と「CSS3 PIE」の使い方 | Web制作会社スタイル

wpのheaderに直接埋め込む場合は以下。

.sample { behavior: url(<?php bloginfo('template_directory'); ?>/css/PIE.htc);}

７．問い合わせのコンバージョン設定

問い合わせのコンバージョン設定をしてくれと依頼されることがあります。WordPressで構築する場合Contact Form7を埋め込むと思いますが、従来のGoogleアナリティクス トラッキングコードとユニバーサルでは少し目標設定のコードが違ったのでメモしておきます。

• Contact Form7でGoogle Analyticsコンバージョンタグ設定方法 | フリーランスのWEBデザイン事務所：サカグチデザインオフィス

functions.php に追加しておきたいもの

クライアントさんに納品するサイトは大体自作テーマになるかと思います。いかにプラグインを使わずテーマ内に記述できるかを考えて「functions.php」に書いておきたい機能をまとめました。

８．メディアアップローダーを自作テーマに組み込む

ロゴなど任意の場所の画像を管理画面内から変更させたい場合は、WP3.5以上が対象となりますが自作テーマに画像アップローダーをつけることができます。wp_enqueue_mediaの情報が少なかった中、参考になったのがこちらのサイト。スクショのように画像を複数登録させることも可能となります。

• WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。 | Firegoby

９．ビジュアルエディタをカスタマイズ

標準のビジュアルエディタは初めての方には何かと使いにくく、気づいたらクライアントさんが更新せずに放置ということだってありえます。こちらはビジュアルエディタを使いやすく分かりやすいようにカスタマイズする方法。

• WordPressのビジュアルエディタをカスタマイズする | webOpixel

１０．RSSにサムネイル画像を表示

Feedlyに画像で出るようにしてくれと言われることはないかと思いますが、少しでも流入を増やしてあげたいということでRSSにアイキャッチ画像を表示させる方法をメモ。

• WordPress記事のRSSにサムネイル（アイキャッチ）画像を表示する方法 *Ateitexe

１１．管理画面でコンテンツの文字数表示

保守などで「○○文字」を目安に書いてください等指定した時に、お客さんの方で簡単にコンテンツの文字数をチェックできる方法。管理画面の投稿一覧のカラムに文字数を表示させます。

• WordPress管理画面の投稿一覧で、記事の文字数がチェックできるようにしてみた - 拡張現実ライフ

１２．pタグを削除

wpautopを使ったhtmlソースをそのままにpタグを削除する方法。

• WordPressでエディタに自動生成されるタグ(＜p＞とか＜br＞)を制御する方法まとめ | 株式会社WEB企画スタッフブログ

１３．コメント欄の下にある使えるHTMLタグを消す

コメント入力欄下にある「HTML属性が使えます」を消します。comment_form()について詳しくはこちらのFunction Reference/comment form « WordPress Codexを参考に。

• WordPress › フォーラム » コメント欄の下にある使えるHTMLタグの案内を消したい

１４．固定ページに拡張子を追加する

既存サイトに拡張子がついているのでそれを引き継ぎたい、固定ページの拡張子をhtmlやphpに変更したい。そんな時はこちらのサイトが参考になります。パーマリンクのリライトルール変更については関数リファレンス/WP Rewrite - WordPress Codex 日本語版で。

• 固定ページのURLの拡張子をhtmlに変更する:WordPress私的マニュアル

１５．ギャラリー機能のカスタマイズ

固定ページにテンプレートをあて、メディアを追加からギャラリー作成で簡単にギャラリーページを作成することが可能になりました。ギャラリーページにメイソンリーとColorboxを組み合わせてオシャレなページを作成することもできます。

• WordPressのギャラリー機能の使い方｜写真の追加方法