calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Wordpress_Site_Migration

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

PR
IT/WEB業界への転職なら
Sponsored Link

もくじ

移行中

パフォーマンス

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

移行中

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

maintenancemode

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

2.旧url から新url へのリダイレクト

redirect-newurl

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

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

3.一時的にキャッシュを制御させる

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

パフォーマンス

4.非同期で読み込む

read-asynchronous

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

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

5.jQueryや外部 JavaScript の競合を避ける

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

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

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

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

6.旧IEでCSS3を再現

css3-oldie

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

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

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

7.問い合わせのコンバージョン設定

conversion-set-inquiry

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

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

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

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

media-uploader-theme

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

9.ビジュアルエディタをカスタマイズ

customize-visual-editor

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

10.RSSにサムネイル画像を表示

thumbnail-rss

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

11.管理画面でコンテンツの文字数表示

characters-screen

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

12.pタグを削除

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

13.コメント欄の下にある使えるHTMLタグを消す

remove-commentbox

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

14.固定ページに拡張子を追加する

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

customizing-gallery

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

gallery_corporate

スポンサード リンク

この記事を書いた人
投稿者:commte

株式会社コムテ代表取締役。2015/8:弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。

URL:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする