スキップしてメイン コンテンツに移動

投稿

ラベル(WordPress)が付いた投稿を表示しています

CloudFlareでWordPressサイトの表示速度を高速化(SPDY化)!かつSSL(https)化!CloudFlareの導入方法!

【趣旨】 既にWordPressで構築済みのWEBサイトに、CloudFlareを導入して高速化(ついでにSSL化)する方法を解説します。 【CloudFlareの高速化の仕組み】 ざっくりですが、以下の仕組みによりWEBサイトの表示が高速化します。 CloudFlare公式サイト: https://www.cloudflare.com/ CloudFlareのCDN(高速に配信するために最適化されたネットワーク)に既存コンテンツをキャッシュさせる。 当該ドメインのネームサーバー情報を変更し、上記CDNを参照させるようにする これにより、いままでhttp://aaa.com/などとブラウザのアドレスに入力されると、ブラウザはDNS(ドメインと実際のサーバーの場所をひもづける賢い仕組み)に問い合わせて、既存サーバーにデータを取りに行っていましたが、CloudFlare導入後は、CloudFlareの高速で最適化されたCDNを見に行くようになり、表示が高速化されます。 【今回の前提環境】 以下の環境にCloudFlareを導入するものとします。 ・サーバー:エックスサーバー(X10プラン) ・CMS:WordPressで構築済み ・CloudFlare Pro版を購入 【既存サイト導入に対する問題点】 問題点1 無料版の場合、SSL証明書発行にきっちり24時間かかる。 =>Pro版を購入※すれば即時発行されます。今回は既にリリース済みサイトということもあり、Pro版を購入するものとします。 ※1サイト目は$20、2サイト目以降は、プラス$5 問題点2 ネームサーバーの浸透時間(ユーザーそれぞれの環境により異なる) =>どう問題か。以下に記載します。 ・ドメインのネームサーバーをCloudFlareのものに書き換える必要があるため、各ユーザーの環境次第で浸透時間に差がでます。 ・浸透早いユーザー(以下、早ユーザー):CloudFlareのCDNにキャッシュされたコンテンツを見に行きます。 ・浸透遅いユーザー(以下、遅ユーザー):エックスサーバーのコンテンツを見に行きます。 ・WordPressの設定(<?php bloginfo(...

WordPressのカスタムフィールドの出力をCSSで素敵にデザイン(フィルターフック未使用版)

【趣旨】 WordPress(に限ったことではありませんが)のカスタムフィールドなどの出力で な出力を、PHPの「preg_replace」を使用して という素敵な見た目に変更します。 (フィルターフックは使用しませんので、functions.phpは編集不要です。) 【コード的には】 Before <p>本日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p> After <p><span class='mydeco'>本</span>日は晴天なりテキストテキストテキストテキストテキスト...</p> <p>二段落目テキストテキストテキストテキストテキストテキストテキスト...</p> CSS .mydeco { color: #fff; background: #c6506d; margin: 6px 5px 0 0; padding: 17px 12px 12px; text-align: center; float: left; font-size: 44px; font-weight: 400; line-height: 30px; } (CSSはあらかじめ用意しておきます。) 【方法】 テンプレートの当該カスタムフィールドの出力が <?php the_field('cf_mytxt',$post->ID); ?> だとして、出力箇所を以下のように変更します。 (※プラグイン「 Advanced Custom Fields 」での出力方法です。  標準では post_custom('cf_mytxt')のように取得します。) <?php $string = get_field('cf_mytxt',$post->ID); //(1) $pattern = "/^<p>(.)(.+)$/mu"; //(2) $replac...

WordPressのwp_get_archivesで月別リストを生成する際に<li>をカスタムする方法

【About】 WordPressの wp_get_archives('type=monthly') で月別のリスト<li>を生成する際に、特定の年月のアーカイブページを表示した際に<li>に特定のクラス(class="active"など)を設定する方法を記載します。 また、おまけとして、functions.phpによらず、テンプレートで<li>をカスタマイズする方法も記載します。 【通常の書き方】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> とすると <HTML> <p>月別アーカイブ</p> <ul>     <li><a href="http://hoge.com/2013/12/">2013年12月</a></li>     <li><a href="http://hoge.com/2013/11/">2013年11月</a></li> </ul> などと生成されます。 これを、ある月を表示しているときに、該当のリスト<li>に class="active" を追加したいとします。 【カスタマイズ方法】 <WordPress> ーテンプレート <p>月別アーカイブ</p> <ul>     <?php wp_get_archives('type=monthly')); ?> </ul> (変更なし) ーfunctions.php functions.phpに以下を追加 <?php ・・・ function my_archives_link($link_html){   $my_month = '/'...

WordPressでAdvanced Custom Fieldsの画像表示ボタンが効かないとき

WordPress のカスタムフィールドプラグイン 「 Advanced Custom Fields 」 をインストールして、投稿画面の画像表示ボタンが効かないときは以下をチェックしてみてください。 (1) .htaccess の設定 phpやjsのアクセス制限などしていないか確認 (2)ディレクトリの パーミッション 確認 インストール時に、/wp-content/に書き込みできるようにパーミッションを777にしますが、戻すのを忘れていないか。 以下フォルダを755などにして確認 /wp-content/plugins/advanced-custom-fields/js /wp-content/plugins/advanced-custom-fields/ /wp-content/plugins/ /wp-content/