Program & Design Tips

趣旨 レスポンシブサイトで（PCサイトと構造を共通にする関係で）、ヘッダー部にロゴやらテキストやらバナーやらを配置する必要があり、スマホ時のファーストビューの大部分をヘッダー部が占拠してしまい、コンテンツまでが遠くなってしまうことは多々あります。

その場合、グローバルナビゲーション部分にアンカー（<div id="gnavi"等）を作っておいて、ページ遷移時にそのアンカーにリンク（<a href="/page/#gnavi"等）し、グローバルナビゲーションが画面の最上部に表示されるようにする（ヘッダー部分は上部にスクロールすれば見える）のもひとつの方法です。

しかしスマホサイトのみでの仕組みのため、ソースコードはいじりたくありません。

そんなときに、JavaScriptで画面の幅を判定し、スマホ時のみリンクアドレスに動的にアンカー名を追加してしまう方法を記載します。



方法 方法は簡単で、以下のコードでOKなはずです。

$(document).ready(function () {     if ($(window).width() < 768) {         $('a').click(function(e) {             if ($(this).attr('href') && !$(this).hasClass("in-page-link")) {                 $(this).attr('href', $(this).attr('href') + "#gnavi");             }         });     } });


解説 特に難しいところはないと思いますが、注意点としては、上記を実装すると、ブラウザの幅が　768px未満のときは、全てのリンクにアンカー名（ハッシュ、#gnavi）が追加されてしまいますので、追加されたくないリンクはif文で除外するようにしています。（上記の例では.in-page-linkというクラスをもつ aタグは動作対象外としています。）



以上です。

【趣旨】 既に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版を購入



【既存サイト導入に対する問題点】問題点１ 無料版の場合、SSL証明書発行にきっちり２４時間かかる。
=>Pro版を購入※すれば即時発行されます。今回は既にリリース済みサイトということもあり、Pro版を購入するものとします。
※1サイト目は$20、2サイト目以降は、プラス$5

問題点２ ネームサーバーの浸透時間（ユーザーそれぞれの環境により異なる）
=>どう問題か。以下に記載します。

・ドメインのネームサーバーをCloudFlareのものに書き換える必要があるため、各ユーザーの環境次第で浸透時間に差がでます。

・浸透早いユーザー（以下、早ユーザー）：CloudFlareのCDNにキャッシュされたコンテンツを見に行きます。

・浸透遅いユーザー（以下、遅ユーザー）：エックスサーバーのコンテンツを見に行きます。

・WordPressの設定（<?php bloginfo('url'); ?>等の元になる変数）を、「http」のままか「https」に変更する必要がありますが、それぞ…

【趣旨】 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); //（１） $pattern = "/^<p>(.)(.+)$/mu"; //（２） $replacement = "<p><span class='mydeco'…

【趣旨】 HTMLで、あるページ（page1.html）から別のページ（page2.html）の特定の場所にリンクさせる場合

あるページ
page1.html
<a href="page2.html#anchor">アンカーの位置へジャンプ</a> （以降、アンカーリンクと呼びます。）

別のページ
page2.html
<div id="anchor">アンカーの場所</div>
などと記載しますが、これだとpage1から、『一瞬で』page2の特定の場所に移動してしまい、（page2のヘッダー部分が見えないだったりすると特に）ユーザーが迷子になりやすいです。
また、コンバージョンに向けてストーリーでページ遷移を設計している場合も、そのアンカーリンクでストーリーが途切れてしまい、コンバージョン率の低下を招きます。（きっと）

そこで今回はアンカーリンクで何が起ったのか、自分がどのページのどこにいるのかをユーザーに認識させる、ユーザーにやさしい方法を記載します。


【実装】 page1.html
<a href="page2.html?ancid=anchor">アンカーの位置へジャンプ</a>

page2.html
<div id="anchor">アンカーの場所</div> （従来どおり）

jQuery
$(document).ready(function () {     // ------------------------------     // 別ページへのやさしいアンカーリンク     // ------------------------------     var url = $(location).attr('href');     if (url.indexOf("?ancid=") != -1) {         setTimeout(function(){           var sp_arr = url.split("?ancid=");           var hash   = …

【趣旨】 WordPressのショッピングカートプラグイン「Welcart」に、メールマガジン「acmailer」（無料で使えるメール配信CGI）を連動させる。


【既出の方法】 http://tukuruder.com/archives/1449
http://www.be-friend.biz/201204/
などにすばらしい記事がありますが、方針としてはいずれも

・登録はWordPressの「functions.php」に、Welcart登録完了時のフックにアクションフック（もしくはフィルターフック）して登録（acmailerのreg.cgiにパラメータを渡してPHPの file_get_contents を実行）

・削除と更新はjQueryでacmailerのreg.cgiにパラメータを渡して$.ajaxを実行

としています。


【今回の方法】 どうせなら、WordPressのfunctions.phpに手を加えることなく、すべてjQueryでやってしまったほうが気持ちがいいということで、登録もjQueryで行います。


【WordPressの設定】 functins.php => 特に記載なし


【jQuery】 （削除、変更は上記URLのブログご参照）

$(function(){   //登録   $('.customer_form_entry input[name="regmember"]').click(function () {       // メールアドレス、パスワードを1回のみ入力にするために値設定（オプション。HTML側はhiddenにしておきます。）     $('.customer_form_entry #mailaddress2').val($('.customer_form_entry #mailaddress1').val());     $('.customer_form_entry #password2').val($('.customer_form_entry #password1').val());       //メールアドレス取得     var mailaddress = $('.customer_form_e…

【実現したいこと】 上の図において、要素１と要素２の下面を揃えたい。


【よく見る方法は...】 ・親要素に「position:relative;」
・子要素に「position:absolute;」、「bottom:0;」
とすると、左右のdivの高ささえ揃えておけば、下面を合わせられますが、BootstrapなどのCSSフレームワークを使用していたりして、既存のスタイルと干渉してしまう場合に、JavaScript（jQuery）で実現する方法を記載します。


【JavaScriptでの実現方法（考え方）】
上の図において、スクリプトを使用し、「A」、「B」、「C」を高さを取得し、計算により「D」の高さを取得します。

「D」=「A」-「B」-「C」

この「D」を要素２の「margin-top」に追加してあげます。

今回は、レスポンシブ（RWD）に対応するため、ウィンドウの幅を変えた時にも「margin-top」を設定し直す仕様とします。


【実装】 jQuery(document).ready(function() {   adjustPosition();     $(window).resize(function () {     adjustPosition();   });   function adjustPosition(){       var heightA = $("要素１").outerHeight();       var heightB = $("テキスト部").outerHeight();       var heightC = $("要素２").outerHeight();       var heightD = heightA - heightB - heightC;       if (heightD > 0) {         $("#要素２").css("margin-top", heightD + "px");       }   } });

【解説】 特に難しいことはしていませんが、初回とウィンドウリサイズ時に、それぞれの要素の高さを取得して（outerHeightは、padding, bord…