カテゴリー: Web制作・プログラミング

実際の制作現場で役に立つ、技術的な話がメイン。

  • WordPress ajaxがスマホで動かないとき、原因は全然違うところにあった

    WordPress ajaxがスマホで動かないとき、原因は全然違うところにあった

    WordPressでajax実装したのはいいけど、スマホで実機確認したら動いてない!読み込みに失敗してる!

    PCで動いてスマホで動かないってどういうことやねん…ajaxやぞ…そんなことあんのか…

    と長い間悩んでましたが、全然違うところに原因があってしんどかったという話です。




     

    管理画面にログインしているかどうかが問題だった

    スマホで動いてないのではなく、管理画面にログインしてないときに動いてなかったのです。なんてこった…ずっとログインしたまま作業してたからね…

     

    というわけで、管理画面にログインしてないときに動かない場合に見る部分はこちらです。

    /**
     * Ajax実装部分
     */
    function my_ajax_scroll() {
      // ここに処理を書く
    }
    add_action('wp_ajax_my_ajax_scroll', 'my_ajax_scroll');
    add_action('wp_ajax_nopriv_my_ajax_scroll', 'my_ajax_scroll');

    WordPressでAjaxを使うとき、functionsにこんな感じで関数を書き、add_actionしますね。
    この”wp_ajax_nopriv”のほうは「ログインしていないとき」に有効なadd_actionで、ここを忘れてたり間違えてたりすると、ログインしていない状態でうまくajax通信ができないということでした。

    以上、現場からでした。

  • レスポンシブコーディングで早めに知っておきたい便利な小技まとめ

    レスポンシブコーディングで早めに知っておきたい便利な小技まとめ

    コーディングを始めたての頃は、レスポンシブでかなり苦戦すると思います。僕がWeb制作をやりはじめたころは、まだレスポンシブはそこまで一般的というわけでもなく、同じく苦戦しました。

    ただ、今はレスポンシブじゃないほうがおかしいというほどレスポンシブが当たり前の時代になっていて、それまで苦戦していたことが今では楽に実装できるようになっています。

    この記事では、僕がレスポンシブの際、もっと早くこの技術を使うことができていれば…と思った小技たちを紹介していきます。




    picture要素

    picture要素とは、HTML5.1から追加されたタグの一つで、これを使うと画面の横幅に合わせ、画像の切り替えができるようになります。

    以下のように書きます

    <picture>
      <source media="(max-width: 1200px)" srcset="common/img/hoge_m.png">
      <source media="(max-width: 750px)" srcset="common/img/hoge_sp.png">
      <img src="common/img/hoge.png" alt="hoge" width="1920">
    </picture>

    オリジナルのimgをpictureタグで囲み、”source”要素でそれぞれの横幅に合わせた画像を指定。これだけで、各横幅に最適化された画像を自動で切り替えることができます。

    今までは、imgを複数並べてclass=”sp”,class=”pc”とかつけて、cssでdisplayで切り替えて…とかめんどいことをやってましたが、これならhtml書くだけで済むので楽ですよね。

    srcset

    上記pictureを使用するのは、基本的に画面幅で画像そのものが切り替わる(縦横比が違ったりする)場合のみに推奨されています。

    ただ単に、デバイスによって表示させる画像のサイズのみを切り替えたい場合、img要素にsrcsetを使うことで対応します。

    <img src="img/hoge.png" srcset="img/hoge-320.png 320w, img/hoge-640.png 640w" alt="hoge">

    picture要素、ぜひ覚えておきましょう。IE11では使えないことになってますが、スマホにIEはないので全く問題ないです。(未対応ブラウザではimg srcのみが表示される)

     

    単位”vw”

    cssで使う数値の単位として、px、%、em等いろいろありますが、その中でもレスポンシブのときとびきり便利なのがこの”vw”。

    こいつはどういう単位かというと、

    1vw = (ウィンドウの横幅)*1%

    ということで、ウィンドウ幅に合わせて可変する単位です。

    ほんなら%でよくない?と思われるかもしれませんが、まぁ聞いてください。まず、%だと「親要素の幅」に依存します。そして、だいたいはwidthであれば親要素のwidth、heightであれば親要素のheightに依存しますよね。

    しかし、vwの場合は「ウィンドウ幅」なのです!ウィンドウ幅の言うことしか聞きません。(ウィンドウの高さに依存したい場合は、vhを使いますが、こっちはあまり使いません)

    更にいうならこのvwの便利なところは、縦方向の指定とフォントサイズにあるのです。

    縦方向の指定

    いや横幅ちゃうんかい!

    そう思われても無理はありません。しかしこのvw、縦方向の指定に真価を発揮するのです。

    例えば、特定の要素にbackgroudを指定して、横:縦が4:3の比率を保ったままレスポンシブに対応させたい場合、今まではこんなめんどくさいことをしていました。

    .hoge {
      width: 100%;
      height: 0%;
      padding-top: 75%;
    }

    「heightを0にして、padding-topで横幅に対する比率を記述する」

    めんどくさっ!しかもこれ、実質縦幅がゼロなので、この中に何か要素入れたいときはabsolute配置しなきゃいけないという…めんどくさっ!!

    しかしvwを使えばこの通り。

    .hoge {
      width: 100%;
      height: 75vw;
    }

    要素の横幅は画面幅の100%だとすれば、縦幅は画面幅の75%、つまり75vwということになります。これであれば縦幅もちゃんとありますので、普通に使える。神だなー。

    これを知らない時代は相当大変でした。しかもvwを知った当時、なぜかvwの使用は推奨されていませんでした。なんでかはわかりません。

    これはiframeとかにも使えますので、Google Mapの表示調整にも便利。

    フォントサイズ

    例えば以下のように、画像の上にテキストを乗っけるパターン。

    これを「縦横比そのまま、テキストの配置もサイズもそのままでレスポンシブ対応」って言われたらどうしますか?各画面幅に合わせて細かくメディアクエリを分けて調整します?「1枚の画像にしろや!」ってなりますよね。

    しかしフォントサイズにvwを使えば、画面幅に依存するので、割と簡単に実装できます。

    まぁそれでも「画像にしろや!」とはなりますけどね。いいじゃんこんなん画像で。偉い人はやたらテキストにしたがるんです。

    注意点として、vwを使ったとことろで各ブラウザごとの最小フォントサイズ制限には逆らえないので、もしフォントサイズが小さすぎる場合は、そこは技術的に厳しいですと言ってあげましょう。

    transform: scale(); を使えば…いや、聞かなかったことにしましょう。できないんです。いいね?

     

    @media only screen and (min-width: )

    レスポンシブというと、

    @media only screen and (max-width: 750)

    と「ある横幅以下なら」という記述ばかり使いがちですが、その逆、「ある横幅以上なら」を記述する

    @media only screen and (min-width: 751)

    もめっちゃ便利なんです。つい忘れがちですけどね。

    例えば、以下のような場合によく使います。

    • hoverのとき。スマホではhoverは使わない。むしろ使うとSafariでバグることがあるし。
    • PCでは電話番号のリンクを無効にしたいとき。
    • モバイルファーストのとき。
    • PCの場合は3列並びの3つ目だけmargin-rightをなくしたい(:nth-childを使う)が、スマホの場合は2列なので3列目のmargin-rightをなくしたのを打ち消した上で2列目のmargin-rightをなくしたいとき

    基本的に、max-widthばっかり使うと「PC用に書いたCSSを上書きしなきゃいけない」わけですが、min-widthもちゃんと使ってやれば、切り替えがよりスムーズになります。



    おわり

    いやー便利になりましたよね。難しいと思われていたレスポンシブコーディングも、今や当たり前の技術なわけで。

    技術はどんどん新しく便利になっていってますので、できるだけ新しい技術を学んでいきたいところ。ネットでググるだけの独学でコーディングをやっていると、けっこう古い記事を参考にしちゃうことがよくあります。

    僕も古い技術に縛られたおじさんの一人なので、新しい技術を吸収しようとがんばってる毎日です。まだまだ思いついたものがあればどんどん書き足していきますので、こんなんも紹介してくださいってのがあったら教えてくださいね!

     

    ではでは、良いコーディングライフを。

  • VS Codeのユーザースニペットで「$(ドル記号)」を文字列として出力させる

    VS Codeのユーザースニペットで「$(ドル記号)」を文字列として出力させる

    Visual Studio Codeの便利な機能の一つ「ユーザースニペット」。




    こちらjsonファイルにソースを書いて管理するわけですが、”$”には特別な用途がありますよね。

    例えば以下のように書くと、

    "Get Template Part": {
    	"prefix": "_gtp",
    	"body": [
    		"<?php get_template_part('$1'); ?>"
    	]
    }

    ‘_gtp’と書いてTabキーを押すと'<?php get_template_part(‘$1’); ?>’が出力され、
    さらに’$1’の位置に自動でカーソルが持っていかれるという機能。

    しかしこれでは、例えばphpの変数’$hoge’を出力させることができない。困った。
    バックスラッシュ’\’でエスケープできるかと思いきや、この’$’についてはなぜかできないもよう。

    で、しばらく諦めてたんですが、ついに解決しました。以下のようにバックスラッシュを2つ使ってエスケープするみたいです。

    \\$

    これでヨシ!

  • そのSEO業者大丈夫?依頼する前に読んでほしいGoogleのこれ

    そのSEO業者大丈夫?依頼する前に読んでほしいGoogleのこれ

    「SEOのこと全然わからんからSEO業者に頼もうか」

    わかります。しかしちょっと待ってください。世の中にはほとんど効果のない対策の提案で報酬を貪る業者や、確かに効果はあるかもしれないけど、バレたらペナルティを請けて大損害を被るような対策を行う業者がいます。けっこういます。




    この件について、Googleがだいぶキレ気味で勧告を出しています。それが以下のページ。

    こちらのページには、Googleが提唱するSEOの本質や、SEO業者の必要性、危険性、選び方などがGoogle自身によって説明されていますので、SEOを行う場合はまず読んでみてください。「え?これ効果あるって言われてめっちゃお金払ったんだけど、効果ないの?」ってことがけっこう書かれているかもしれません。SEOってそういう闇が深い世界なんです。こわいですねー

    また、SEOのスタートガイドもありますので、まったくわからない人はとりあえずGoogleの推奨するSEOを実行するところから始めてみてはいかがでしょうか。読んでおくだけでも、結局SEO業者に頼んだときに「いやそれGoogleスタートガイドに書いとることそのまま言っとるだけやん」ってなりますので、余計な費用をかけずに済みますよ。

     

    Web屋としてこんなこと言うのもなんですが、SEO業者に頼むのはほぼ無駄であることが多いです。SEOのほとんどって、Googleのガイドライン見たら書いてあるんですよね。

    もちろんしっかりしたSEO業者は、ちゃんとやってくれます。

    例えば、たった一つのサイトをビッグワードで上位にするため、かなり濃いメディアサイトをいくつも立ち上げて関連付けるとかやってる業者さんもいます。どのサイトも内部SEOがこれでもかというくらい充実しています。こういうのって、社内だけではなかなかできないですよね。

    Googleの注意を聞いて、ちゃんとしたSEO業者を選びましょうね!

    現場からは以上です。

  • VS Code 複数行選択できる「マルチカーソル」まとめ

    VS Code 複数行選択できる「マルチカーソル」まとめ

    以前、↓の記事でちょろっと紹介したマルチカーソルですが、

    初心者がコーディングを3倍速くするために知っておきたい6つの技術

    Visual Studio Codeでは便利なマルチカーソルのショートカットがいっぱいあるよということを知ったので、紹介したいと思います。

    WindowsもMacも両方書いていきますので、参考になればうれしいです。




    選択した文字列と同じものを順番に検索

    ドラッグとかで選択した文字列と同じものを、現在の位置から順番に検索し、同じく選択していく。ちなみに、Shift + 方向キー(Windows)で選択できるって知ってました?

    Windows: Ctrl+ D
    Mac: command + D

    選択した文字列と同じものを一気に検索

    こちらは同ファイル内にある同じ文字列を一気に検索し、全部選択する。
    Ctrl+Cでコピーし、Ctrl+Fで検索窓を開いて一気に置換ということもできるので、一括置換したい場合はそっちのほうが便利かも。

    Windows: Ctrl + Shift + L
    Mac: command + shift + L

    カーソルを手動で1個ずつ追加

    好きなところにカーソルを追加していき、一括で編集できる。手が滑って別のとこに追加しちゃったよって場合でも、同じ場所で再度キーを叩くとカーソルが消える。

    Windows: Alt + クリック
    Mac: command + クリック

    選択した行の末尾にカーソルを追加

    ドラッグで選択した複数行の末尾にカーソルを追加できる。その状態でHomeキーを叩けば、行の先頭にカーソルが移動する。

    Windows: Alt + Shift + I
    Mac: option + shift + I

    おわり

    マルチカーソルは、駆使すればコーディングにかかる時間を大幅に削減できます。例えば、都道府県の市区町村のリストを配列に入れたいとかなった場合、まともにやってたら腱鞘炎になるレベルですが、マルチカーソルを使えば楽にできますね。

    以上、現場からでした。

  • Advanced Custom Fieldsで、チェックボックスの値を全部取得したい

    Advanced Custom Fieldsで、チェックボックスの値を全部取得したい

    WordPressのプラグイン「Advanced Custom Fields」で、チェックボックス(セレクトボックス)の値を、選択してないやつも含めて全部取得したい。

    例えば、「月火水木金土日」という選択肢があって、「火水」しか選択してなくても、とりあえずリストとして全部表示させたいわけである。

    これはけっこう長いこと悩んでいて、あれこれややこしい方法で実装してみては「ほんまにこれしかないんか…」と調査しまくっていたが、ついにめっちゃ簡単な方法を見つけたので備忘録。




    実装

    関数”get_field_object()”を使う。

    例えば、”custom_week”というカスタムフィールドに、「月~日」の選択肢を用意しており、更に土日を選択しているとき、値は以下のようになる。

    $week = get_field_object('custom_week');
    echo '<pre>';
    var_dump($week);
    echo '</pre>';
    
    // 以下、出力部分
    array(15) {
      ["key"]=>
      string(19) "field_59b111613d05f"
      ["label"]=>
      string(9) "営業日"
      ["name"]=>
      string(14) "custom_week"
      ["_name"]=>
      string(14) "custom_week"
      ["type"]=>
      string(8) "checkbox"
      ["order_no"]=>
      int(1)
      ["instructions"]=>
      string(0) ""
      ["required"]=>
      int(0)
      ["id"]=>
      string(24) "acf-field-custom_week"
      ["class"]=>
      string(8) "checkbox"
      ["conditional_logic"]=>
      array(3) {
        ["status"]=>
        int(0)
        ["allorany"]=>
        string(3) "all"
        ["rules"]=>
        int(0)
      }
      ["choices"]=>
      array(7) {
        ["月"]=>
        string(3) "月"
        ["火"]=>
        string(3) "火"
        ["水"]=>
        string(3) "水"
        ["木"]=>
        string(3) "木"
        ["金"]=>
        string(3) "金"
        ["土"]=>
        string(3) "土"
        ["日"]=>
        string(3) "日"
      }
      ["default_value"]=>
      string(0) ""
      ["layout"]=>
      string(10) "horizontal"
      ["value"]=>
      array(2) {
        [0]=>
        string(3) "土"
        [1]=>
        string(3) "日"
      }
    }

    “var_dump()”でデバッグしてしまえばだいたいわかるけど、この場合

    “$week[‘choices’]”

    で選択肢を配列で全部取得できる。あとはforeachで回すなりなんなり好きにしちゃいましょう!

    繰り返しフィールドだろうとなんだろうと、get_field_object()で全値をとって、var_dump()で中身を見てしまえばなんだってできるね。

     

    以上、現場からでした。

  • 【jQuery】フォームの二重送信を防止するシンプルな方法

    【jQuery】フォームの二重送信を防止するシンプルな方法

    フォームの「送信」ボタンを連続で押すとメールが多重送信されちゃうから、それを阻止したいとなった。

    独自でフォームを作っているなら、phpでトークンを使って検証して動作を制御なんてこともできるんですが、WordPressでプラグインとかを使っている場合、phpをいじるのはちょっと現実的ではない。

    というわけで、今回はjQueryで3分でできちゃう方法をご紹介します。




    実装

    HTML

    フォームのHTML。とりあえずサブミットボタンにIDをつけましょう。

    <input type="submit" id="double" value="送信する">

    余談ですが、cssでスタイリングするときはclass、javascriptで動かす場合はidにしておくとわかりやすくていいですよ。また、classじゃなくてidで動かしたほうが圧倒的に処理が速いみたいです。僕はスタイリングの際はほとんどidを使用しません。

    jQuery

    たった3行。

    $('#double').on('click', function () {
      $(this).css('pointer-events','none');
    });

    “#double”をクリックしたら、それに{pointer-events:none;}をつけてるだけですね。シンプルー!

    pointer-events: none;はマウスホバーやクリック等のイベントの一切を禁止する神のようなプロパティで、便利すぎるのでちょいちょい使ってます。ボタンを1回クリックしたら、cssでそれ以降のイベントを禁止する。簡単ですね。

    欠点

    例のごとく、IE10以下では使えません。まぁ、もういいんじゃない?

    安全性も動作も完璧に仕上げたいのであれば、phpでがんばるしかないかなと思いますが、実装費用に比べて効果はどんなものかといったところで相談しましょう。けっこう大変ですよ。

    disabledじゃだめなの?

    フォームのパーツの操作を全面的に禁止する”disabled”というものがありますよね。実は僕も最初これを使ってやってみたんですが、サブミットボタンがdisabledになった瞬間、フォームの送信も中断されてしまうんですね。送信ボタンを押しても何も起きない。そして2度とボタンは押せないのである。

    巷ではこれを回避するために、ボタンが押されたらdisabledとなると同時に、ajaxで別途フォームの内容を送信するという方法が紹介されていましたが、これまたWordPressプラグインでやるのはきついです。

    cssでイベントを禁止するだけなら、フォーム送信を妨げることもありません。

     

    以上、現場からでした。

  • WordPress開発が捗る!ブックマークしておくべきCodexまとめ

    WordPress開発が捗る!ブックマークしておくべきCodexまとめ

    WordPressには関数やフック機能など、便利なものが一通り揃えられていますが、我々はそのほんの一部しか知りません。多すぎて覚えられるわけないし。なので、毎回「どうすんだっけなー」と探しちゃいますよね。

    WordPressには、WordPressの全てが記されているであろう「WordPress Codex」というWikiが存在するんですが、初心者のうちはあんまり見ないですよね。なんか、ググって出てきたコードをコピペする感じ。

    初心者のうちはそれでいいと思いますが、ある程度関数とかわかって自分でコードを書けるようになったらこれほどありがたいサイトはないので、ぜひ見てみてくださいね。今回は、その中でも開発に便利なページを紹介しますので、ブックマークしておきましょう。




    関数リファレンス

    リンク

    WordPressの関数が全部あります。ここだけでもブックマークしておけばとりあえずOK。

    条件分岐タグ

    リンク

    よく使う条件分岐タグ。ほぼどんなものでも条件分岐できちゃう。ログインしてるときだけとか、便利ですよね。

    テンプレートタグ

    リンク

    これ一つでいろんなテンプレートが呼び出せちゃうタグたち。

    管理メニューの追加

    リンク

    管理画面のメニューに項目を追加するための関数たち。テーマ開発やプラグイン開発には必須ですね。

    プラグイン API/フック

    リンク

    涙が出るほど便利だけど、鼻血が出るほどややこしい、フックについての基本が書かれています。特に「いつ関数を実行するのか」を指定するためのフックは開発でよく使いますね。

    ただ、使い方についてはCodexの説明は正直よくわからないので、ググったほうがいいです。僕もそのうち書く…かも。

    コーディング規約

    リンク

    WordPress開発するときのコーディング規約について書かれています。

    「コーディング規約?何それ?」となってる方はぜひ見てみてください。あなたのコード、たぶん相当汚いです。

    WordPressのコーディング規約は別に守らなくても誰からも怒られませんが、規約をなるべく守るよう心掛けるだけでも、綺麗で統一されたコードが書けるようになりますよ。なんか、WordPressしてるわーって気分になります。

    おわり

    以上、ブックマークしておくと捗りそうなページを紹介しました。最初はたぶん、見ても何書いてるかわからないと思うんですが、わかるようになればすごく楽しいです。特に、PHPの基礎がわかったら読めるようになると思いますよ。

    PHP初心者にまず読んでほしい一冊の本

    とりあえずざっと見て「こんなんあるんかー」くらいに認識しておいて、いざ開発で詰まったとき、「そういえば…」って思い出せたらいい感じ。

    ではでは、良いWordPressライフを!

  • WordPress 管理画面「ツール」に項目を追加する方法

    WordPress 管理画面「ツール」に項目を追加する方法

    管理画面のメニューとか「設定」内に項目を追加する方法はググればすぐ見つかったんだけど、「ツール」内に項目を追加する方法がすぐには見つからなかったのでメモ。

    使うのはadd_management_page()という関数でした。




    使い方

    使い方は以下の通り

    add_management_page( 'Custom Permalinks', 'Custom Permalinks', 'manage_options', 'my-unique-identifier', 'custom_permalinks_options_page' );

    使用例:

    function all_update() {
      add_management_page('一括更新', '一括更新', 8, 'all_update', 'all_update_page');
    }
    add_action('admin_menu', 'all_update');
    
    function all_update_page() {
      // HTML を表示させるコード
      ?>
      <div class="wrap">
        <h2>一括更新</h2>
        <p>ここにHTMLを書いていくよ</p>
      </div>
    <?php
    }

     

    プラグインをインストールするとなんでもかんでも「設定」に入りがちだけど、ツールっぽい機能はやっぱりツールにいれたいよね。ということで探してみました。

    add_management_page()でツール内に項目を追加する以外にも、「ユーザー」とか「ダッシュボード」とかにも追加できる関数をまとめて紹介しているCodexがありました。これをブックマークしておくと、プラグイン開発が捗りそうですね!

    現場からは以上です。

  • nginx+php-fpmでphpのソースがそのまま表示されてしまうとき確認すること

    nginx+php-fpmでphpのソースがそのまま表示されてしまうとき確認すること

    nginx+php-fpmで、WordPress環境を作る必要があったけど、何度ブラウザでアクセスしても

    <?php phpinfo(); ?>

    がそのまま表示されてしまう。

    いったいどういうことなのか、ググっても海外ですらいい解決法の情報はない。そもそもnginxで検索してるのにapacheの話ばっかり出てくる。もう土下座するしかないと諦めていたそのころ…しょーーーもない原因が判明したのであった。

    みんなが同じ原因で10時間も悩まないように、ここにその原因を備忘録として残しておきます。

    それは、locationの優先順位でした。




    問題のnginx.conf

    listen 80;
    client_max_body_size 2G;
    server_name xxx.xxx.xxx.xxx;
    keepalive_timeout 5;
    root /var/www/wp;
    
    location ^~ / {
      index index.php index.html;
      try_files $uri $uri/ /index.php?$args;
      include /etc/nginx/mime.types;
    }
    
    location ~ \.php$ {
      fastcgi_pass unix:/var/run/php-fpm/www.sock;
      fastcgi_index index.php;
      include fastcgi_params;
      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
      fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    こちらが問題のソース。

    結論からいうと、7行目を

    location  /

    に直したら正常に動作するようになりました。

    原因は?

    原因は、正規表現の記述ミス

    locationの正規表現は、以下のような種類があります。

    プレフィックス 説明
    なし 前方一致
    ^~ 前方一致。一致したら、正規表現の条件を評価しない。
    = 完全一致。パスが等しい場合。
    ~ 正規表現(大文字・小文字を区別する)
    ~* 正規表現(大文字・小文字を区別しない)

    locationにプレフィックスをつけた場合、設定同士で優先順位が発生します。

    /var/www/wp/index.phpというロケーションにアクセスした場合、まずindex.phpをphpとしてnginxで動作させたいので、本当は”location ~ \.php$”にある設定を最優先しなきゃいけないのに、それより前の”location ^~ /”の設定を読んでしまった時点で評価が終わるため、拡張子phpに対する設定が無視されていた

    ずっと必死にphp-fpmとnginxの通信ができていないんじゃないかと予測して調査していましたが、そもそもここの設定部分が無視されているので、何をやっても何も起きていなかったんですね。エラーも出ません。

    いやー怖かった…

    みんなも凡ミスには気をつけようね。

  • WordPress カスタム投稿ごとにfeedの内容を出し分ける

    WordPress カスタム投稿ごとにfeedの内容を出し分ける

    クラ「WordPressのfeedをカスタマイズしてほしいです。しかもカスタム投稿ごとに内容を変えて。」

    ぼく「できらぁ!!」

    というわけでやってみました。案外簡単でした。




    デフォルトのfeedを無効にする

    まず、ややこしいのでWordPressデフォルトのfeedを無効にしておきましょう。functions.phpに以下記述

    remove_filter('do_feed_rdf', 'do_feed_rdf', 10);
    remove_filter('do_feed_rss', 'do_feed_rss', 10);
    remove_filter('do_feed_rss2', 'do_feed_rss2', 10);
    remove_filter('do_feed_atom', 'do_feed_atom', 10);

    feedのテンプレートをコピー

    自分でfeedのphpを書くのは非常にめんどうなので、WordPress本体のものをコピーして使っちゃいましょう。ちなみに、今回コメントのfeedは無視することにします。

    “wp-includes”の中に以下4つのfeed用テンプレートがあるので、コピーしてテーマの中に持ってきます。

    • feed-atom.php
    • feed-rdf.php
    • feed-rss
    • feed-rss2.php

    僕は、テーマの中に”feed”というディレクトリを作り格納しました。

    新テンプレートを読み込むようにする

    上でテーマ内に持ってきたfeedテンプレートを、WordPressのfeedとして使うようにします。functions.phpに以下記述

    function custom_feed_rdf() {
      $template_file = '/feed/feed-rdf.php';
      $template_file = ( file_exists( get_stylesheet_directory() . $template_file )
          ? get_stylesheet_directory()
          : ABSPATH . WPINC
          ) . $template_file;
      load_template( $template_file );
    }
    add_action('do_feed_rdf', 'custom_feed_rdf', 10, 1);
    
    function custom_feed_rss() {
      $template_file = '/feed/feed-rss.php';
      $template_file = ( file_exists( get_stylesheet_directory() . $template_file )
          ? get_stylesheet_directory()
          : ABSPATH . WPINC
          ) . $template_file;
      load_template( $template_file );
    }
    add_action('do_feed_rss', 'custom_feed_rss', 10, 1);
    
    function custom_feed_rss2( $for_comments ) {
      $template_file = '/feed/feed-rss2' . ( $for_comments ? '-comments' : '' ) . '.php';
      $template_file = ( file_exists( get_stylesheet_directory() . $template_file )
          ? get_stylesheet_directory()
          : ABSPATH . WPINC
          ) . $template_file;
      load_template( $template_file );
    }
    add_action('do_feed_rss2', 'custom_feed_rss2', 10, 1);
    
    function custom_feed_atom( $for_comments ) {
      $template_file = '/feed/feed-atom' . ( $for_comments ? '-comments' : '' ) . '.php';
      $template_file = ( file_exists( get_stylesheet_directory() . $template_file )
          ? get_stylesheet_directory()
          : ABSPATH . WPINC
          ) . $template_file;
      load_template( $template_file );
    }
    add_action('do_feed_atom', 'custom_feed_atom', 10, 1);

    do_feed_atom()あたりをWordPress Codexでさらっと見ておくとわかりやすいです。



    feedテンプレートをカスタマイズ

    これでようやくカスタマイズの準備が整いました。さっそくカスタマイズ…する前に、もうちょっと事前知識を入れておきましょう。

    投稿タイプごとにfeedを表示させるには?

    例えば、通常の投稿のfeedであれば、”http://hogehoge.com/feed/”というように、ホームURLの末尾に”/feed/”をつければ表示されます。

    では、カスタム投稿”shop”の場合はどうかというと、

    “http://hogehoge.com/feed?post_type=shop”

    というように、”?post_type=[カスタム投稿名]”をパラメータとしてつけることで表示できます。

    ということはすなわち、テンプレートに”post_type”というパラメータが渡っていて、それが変数として使われていると推測されます。

    そしてWordPressさんのことだから、変数名はきっと”$post_type”だろうと思ってやってみたところ、ドンピシャでした。よかったー、ここわかんなかったらけっこう苦労してたかも。

    というわけでカスタマイズ開始

    一番簡単な”feed-rss.php”を例にします。デフォルトまんまで開くとこんな感じ

    <?php
    /**
     * RSS 0.92 Feed Template for displaying RSS 0.92 Posts feed.
     *
     * @package WordPress
     */
    
    header('Content-Type: ' . feed_content_type('rss') . '; charset=' . get_option('blog_charset'), true);
    $more = 1;
    
    echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>
    <rss version="0.92">
    <channel>
    	<title><?php wp_title_rss(); ?></title>
    	<link><?php bloginfo_rss('url') ?></link>
    	<description><?php bloginfo_rss('description') ?></description>
    	<lastBuildDate><?php
    		$date = get_lastpostmodified( 'GMT' );
    		echo $date ? mysql2date( 'D, d M Y H:i:s +0000', $date ) : date( 'D, d M Y H:i:s +0000' );
    	?></lastBuildDate>
    	<docs>http://backend.userland.com/rss092</docs>
    	<language><?php bloginfo_rss( 'language' ); ?></language>
    
    	<?php
    	/**
    	 * Fires at the end of the RSS Feed Header.
    	 *
    	 * @since 2.0.0
    	 */
    	do_action( 'rss_head' );
    	?>
    
    <?php while (have_posts()) : the_post(); ?>
    	<item>
    		<title><?php the_title_rss() ?></title>
    		<description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
    		<link><?php the_permalink_rss() ?></link>
    		<?php
    		/**
    		 * Fires at the end of each RSS feed item.
    		 *
    		 * @since 2.0.0
    		 */
    		do_action( 'rss_item' );
    		?>
    	</item>
    <?php endwhile; ?>
    </channel>
    </rss>
    

    なんのことはない、普段よく触るテンプレートとだいたい一緒です。

    実際にfeedをブラウザを表示させ、どの関数が何を出力しているのか見ながらやればけっこう簡単に理解できます。

    そして、33行目を見てください。そう、これ…あれですよね!普通に記事をループさせてるだけです!

    記事をループしているので、いつも通り$postとかも使えちゃいます。

    なので、カスタムフィールドもあっさり取得できます。以下は例えばAdvanced Custom Fieldsで取得できる値。

    $link = get_field(‘acf_link’, $post->ID );

    “$post”さえあればいろんな値が取得できます。

    で、カスタム投稿タイプは?

    肝心のそこですが、例えば

    “http://hogehoge.com/feed?post_type=shop”

    で開かれたfeedには、$post_type という変数に”shop”が格納されています。ありがたいですね。

    じゃああとは、$post_typeに入っている値によって場合分けしてやればOKです。

    <?php
    /**
     * RSS 0.92 Feed Template for displaying RSS 0.92 Posts feed.
     *
     * @package WordPress
     */
    
    header('Content-Type: ' . feed_content_type('rss') . '; charset=' . get_option('blog_charset'), true);
    $more = 1;
    
    echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>'; ?>
    <rss version="0.92">
    <channel>
    	<title><?php wp_title_rss(); ?></title>
    	<link><?php bloginfo_rss('url') ?></link>
    	<description><?php bloginfo_rss('description') ?></description>
    	<lastBuildDate><?php
    		$date = get_lastpostmodified( 'GMT' );
    		echo $date ? mysql2date( 'D, d M Y H:i:s +0000', $date ) : date( 'D, d M Y H:i:s +0000' );
    	?></lastBuildDate>
    	<docs>http://backend.userland.com/rss092</docs>
    	<language><?php bloginfo_rss( 'language' ); ?></language>
    
    	<?php
    	/**
    	 * Fires at the end of the RSS Feed Header.
    	 *
    	 * @since 2.0.0
    	 */
    	do_action( 'rss_head' );
    	?>
    <?php if( $post_type == 'shop' ): ?>
    <?php while (have_posts()) : the_post(); ?>
    <?php $thumb = get_field('acf_thumb', $post->ID ); ?>
    	<item>
    		<title><?php the_title_rss() ?></title>
    		<?php if( $post->post_content ): ?>
    		<description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
    <?php endif; ?>
    <?php if($thumb): ?>
    		<link><?php the_permalink_rss() ?></link>
    <?php else: ?>
    <link><?php echo home_url('/'); ?></link>
    <?php endif; ?>
    		<?php
    		/**
    		 * Fires at the end of each RSS feed item.
    		 *
    		 * @since 2.0.0
    		 */
    		do_action( 'rss_item' );
    		?>
    	</item>
    <?php endwhile; ?>
    <?php else: ?>
    <?php while (have_posts()) : the_post(); ?>
    <?php $link = get_field('acf_link', $post->ID ); ?>
    	<item>
    		<title><?php the_title_rss() ?></title>
    		<?php if( $link ): ?>
    		<link><?php $link; ?></link>
    <?php else: ?>
    <link><?php echo home_url('/') ?></link>
    <?php endif; ?>
    		<?php
    		/**
    		 * Fires at the end of each RSS feed item.
    		 *
    		 * @since 2.0.0
    		 */
    		do_action( 'rss_item' );
    		?>
    	</item>
    <?php endwhile; ?>
    <?php endif; ?>
    </channel>
    </rss>
    

    これでよし。

     

    以上、現場からでした。

  • WordPress 特定のカスタムフィールドに値がある記事だけで「前へ」「次へ」を実装

    WordPress 特定のカスタムフィールドに値がある記事だけで「前へ」「次へ」を実装

    「このカスタムフィールドに値がある記事だけで『前の記事へ』『次の記事へ』のページ送りを実装してください」と言われたけど、思ったより大変だったのでメモ。

    通常、詳細記事のページネーションは”previous_post_link()”と”next_post_link()”を使えば簡単に実装できるんだけど、この関数は残念ながらカスタムフィールドの有無の判定とかはできないので、がんばってphpを書いたのであった。




    functions.phpに以下を記述

    function get_custom_pagenation() {
      global $post;
      $html = '';
      $current_id = $post->ID; //現在の記事のID
      $array_has_thumb = array();
    
      // カスタムフィールドに値がある記事を全部出して、"$array_has_thumb"にIDを格納
      $wp_query = new WP_Query();
      $param = array(
        'posts_per_page' => '-1',
        'post_type' => 'post',
        'meta_key' => 'hoge',
        'meta_value' => false,
        'meta_compare' => '!='
      );
      $wp_query -> query( $param );
    
      if( $wp_query -> have_posts() ){
        while( $wp_query -> have_posts() ) {
          $wp_query -> the_post();
          $array_has_thumb[] = $post->ID;
        }
      }
      wp_reset_query();
    
      // "$array_has_thumb"から現在の記事IDのキーを取り出しておく
      $current_key = array_keys( $array_has_thumb, $current_id );
    
      // 前の記事のID
      foreach( $array_has_thumb as $data ) {
        if( $data == $current_id ) {
          break;
        }
        $prev_id = $data;
      }
      // 次の記事のID
      foreach( $array_has_thumb as $key => $value ) {
        $next_id = $value;
    
        if( $key > $current_key[0] ) {
          break;
        }
      }
      if( $next_id == $data ) {
        $next_id = NULL;
      }
    
      // IDが取得出来たらその記事のパーマリンクを取得
      if ( $prev_id ) {
        $prev_link = get_permalink( $prev_id );
      }
      if ( $next_id ) {
        $next_link = get_permalink( $next_id );
      }
    
      // 出力部分
      if( $prev_link ) {
        $html .= '<p class="prev"><a href="' .$prev_link. '">前の記事へ</a></p>';
      }
      $html .= '<p class="list"><a href="' .home_url('/'). '">トップへ</a></p>';
      if ( $next_link ) {
        $html .= '<p class="next"><a href="' .$next_link. '">次の記事へ</a></p>';
      }
      return $html;
    }

    だいたいコメントに書いてある通りの処理です。

    要は、

    • まず’hoge’というカスタムフィールドに値がある記事のみループさせ、
    • 配列’$array_has_thumb’に記事IDを格納。
    • その配列から、今の記事IDの前後の記事IDを取得して、
    • 記事IDが取得できていたらページネーションを表示

    という流れです。前後の記事IDを取得する部分はもうちょい綺麗に書けそう…あとは、meta_keyやpost_typeの値を引数で渡してやると汎用性高まりますね。まぁそれは気が向いたら挑戦してみてください。🤗

     

    使うときはテンプレートに

    <?php echo get_custom_pagenation(); ?>

    と書くと表示されます。

     

    現場からは以上です。

  • 制作会社にホームページ制作を依頼するとなぜ高いのか~依頼の仕方にもコツがある

    制作会社にホームページ制作を依頼するとなぜ高いのか~依頼の仕方にもコツがある

    「新規に事業するから、ホームページ作ってもらおうと思って制作会社に電話して料金聞いてみたけど、高すぎて無理…自分で作るか…」

    そして知識もないのに自分で作った結果、明らかに素人が作った見るに堪えないホームページになってしまい、結局ホームページがほとんど機能しないまま後でプロに頼むことになる…そんなパターンを僕は何件も見てきました。

    僕は制作会社に技術責任者として勤めていたので、制作の見積もりをいつも作っていました。今もフリーランスで制作をやっていますので、見積もりを作ります。ただ、高いですよね…わかります。でも、高いのには理由があるんです。

    今回は、制作側の立場からなぜ制作会社にホームページ制作を頼むと高いのかという理由を説明するとともに、できるだけ安く済ませる方法を紹介します。だから、どうか知識もなく自分で無料で作ろうとしないでください




    高額の理由は、”フルオーダー”にあり

    なぜ制作会社に頼むとそんなに高いんでしょうか。安くても30万とか、一般的には50~100万くらいかかりますよね。

    その理由は、フルオーダーでゼロからサイトを作り上げることを前提としているからです。

    ゼロから作るとなると、そこには様々な工数が発生します。例えば以下のような感じ。

    • ディレクション
    • コピーライティング
    • 撮影、もしくは画像素材の購入
    • デザイン
    • コーディング
    • システム構築
    • サーバー、ドメインの取得・管理

    何を言っているのかわからないと思うので、それぞれどのようなものかざっくり解説します。

    ディレクション

    クライアントからヒアリングを行いサイトのデザインや構成を考えたり、スケジュールやタスクをスタッフに割り振ったりする、いわゆる「監督」のようなものです。

    ヒアリングではホームページを作る目的や背景、そして要望を聞きだし、最適なサイト構成を導き出します。また、スタッフのスケジュールや能力を把握し無理のない納期を設定し、関わる全ての人間と連絡をとりながら進行を管理します。知らない人からは「何この項目いらんやろ」と思われがちな部分ですが、実はけっこう大変なんです。

    コピーライティング

    ホームページに載せる文章やキャッチコピーなどを考える工程です。どのページにどんな情報を載せるかというのはディレクションの段階でだいたい決まっていますが、この段階でもっと詳しく情報を整理し、ワイヤーフレームを作り、校正も行っていきます。

    撮影

    場合によっては、カメラマンを連れてクライアントの職場に訪れ商品や人物、内観・外観などの撮影をします。人を使いますので、もちろんお金がかかります。

    撮影なしで写真素材でいいパターンもありますが、フリー素材とか正直制作ではあんまり使わないと思うので、基本は有料素材サイトから高品質な画像を購入して使います

    デザイン

    いよいよデザインです。ここがやっぱりかなり工数かかりますね。

    ワイヤーフレームからデザインをおこし、プロの素敵なデザイナー様たちが抜群のセンスでブラッシュアップを行っていきます。ここではクライアントとやり取りをしながら、希望のデザインに近づけるようがんばる部分なので、かなり時間がかかる想定となっています。

    コーディング

    コーディングはデザインモックアップをブラウザで見られるようにするよう、html,cssをゴリゴリ書いていきます。

    この段階では、見た目や仕様はほとんど決まっているためデザインよりかは工数少な目の場合が多いと思いますが、それでもトップページをゼロから作るとなると半日くらいは余裕でかかりますので、うーん高いなーという感じになると思います。

    ただし、ここでjavascriptをめっちゃ書かないといけない場合(アニメーションとか、サイトの動きが凝ってる)、実装にすごい時間がかかりますので恐ろしい値段になります。怖いですね。

    システム構築

    お問い合わせや予約フォームであったり、CMS(コンテンツマネジメントシステム)の組み込みであったり、SNSとの連携であったり、ホームページに何か機能をつける場合に発生します。

    通常のホームページであれば、今はphpという言語を使うことが多いと思います。これはhtmlやcssコーディングとはまた違ったもので、構築に時間がかかります。

    サーバー、ドメインの取得・管理

    制作会社でゼロからホームページを作る場合、レンタルサーバーとドメインを契約し、制作会社で管理をする場合が多いと思います。

    サイトのリニューアルを頼まれたときは、「どこでこのレンタルサーバーの情報を手に入れて使っとんやろか…」と思うレベルの謎の低スペックサーバーを使っていることがけっこうあって我々エンジニアは泣きそうになります。

    どうでしょうか。フルオーダーでの制作はけっこういろんなことをしているのがお分かりいただけたかと思います。

    これに対し、一般的には「人日」という計算方法で見積もりが出されます。例えば、一人が一日かけて作業してようやく完了する工数は「1人日」です。そして、1人日はだいたい4~6万くらいすることが多いと思います。

    つまり、4日かかる作業があるとしたら単純に4倍になる(=20万くらい)ということです。やばい。

    これが、制作会社に頼むと高くなる理由です。「作業した時間を売る」という見積もり方法が一般的なので、フルオーダーだとすごいことになるというわけですね。



    制作会社に安く頼む方法はあるのか?

    あります。

    フルオーダーだから高いということは、つまりフルオーダーじゃなければ金額が抑えられるということです。

    例えば以下のような方法で、工数を減らすことができます。

    テキストや素材を提供する

    「載せる文章や使う写真はこっちで考えて渡します!」というパターンですね。

    そうすれば制作会社側は、校正や写真の加工は必要になりますが、大幅に工数を削減できます。ただし、「めっちゃ加工しないと使えない写真をどうしても使ってほしいという無茶振り」をすると、もしかしたら追加費用を請求されるかもしれないです。

    WordPressのテンプレートを使用する

    これが一番工数削減効果が高いです。見積りを頼むときに、「WordPressテーマを使って安くしたいんですけど…」と言ってみましょう。もしかすると制作会社によってはできないと言われることもあるかもしれませんが、できる会社は少なくないでしょう。僕だったら喜んでお請けします。

    WordPressとは、CMS(コンテンツマネジメントシステム)と呼ばれるソフトウェアの一つで、世界中のホームページで圧倒的に使われています。

    WordPressのテンプレートを使えば、例えば以下のようなサイトが簡単に作れてしまいます。

    TCDテーマ「Agenda」

    TCDテーマ「Avalon」

    すごい。

    もはやサイトの構成やデザイン、コーディング、システム構築が完成されていますので、工数を大幅に削ることができます。

    実はこういったWordPressテーマは、コーディングの知識がなくても、管理画面から画像や文章を設定してレイアウトやコンテンツを編集することができるので、自分でプロ並みのホームページを作ることも可能です。

    ただ、それでもやはりWordPressを理解し構築するのは時間がかかりますし、どんなテーマがいいのかイマイチわかりづらいと思いますので、ホームページ制作に精通しているプロに任せたほうが手っ取り早く見栄えも良いサイトになるのは間違いないです。

    最初は必要なページのみ作り、徐々にコンテンツを増やしていく

    予算がない最初の段階でホームページを完璧に作り込もうとせず、とりあえず最低限機能するホームページを作っておき、ホームページから集客しながら事業を拡大させるとともに、徐々にコンテンツを追加していく、といった方法もかなり有効です。

    このパターンで見積もりをお願いするときは、コンテンツを追加するときの見積もりも一緒に頼んでおくといいでしょう。



    おわり

    引越しや家を建てるときと同じで、何にいったいそんなにお金がかかるのかを少しでも理解しておくと、なんとか安くする方法はないかと相談しながら進めることができます。

    そのうえで、いろんな制作会社から見積もりをもらうのもありですね。会社によって全然値段の付け方が違ったりするので、少なくとも2社には見積もってもらうといいと思います。

    ちなみにですが、見積もりを頼むときは電話よりメールのほうがいいですよ。本記事で書いたように制作にはいろんな工程があり意外と複雑なので、すぐに正確な見積もりを出せない場合が多いんですね。

    なので、「新規にホームページ作りたいんだけど、だいたいでいいから今すぐ料金教えてくれん?」といきなり電話しても、制作側としてはまったくどんなものを作りたいかわからないので「うーん…制作の内容によってかなり変わってきますが、最低でも50万くらいは見ておいた方がいいと思います…」と言うしかなくなってしまいます。

    メールで、もしくは直接会って詳しい話を聞きながら、相談していくのがベストです。

    ではでは、良いホームページを作りましょう!

  • WordPress 親カテゴリーを選択できないようにする2018

    WordPress 親カテゴリーを選択できないようにする2018

    WordPressの投稿画面でカテゴリーを選択するとき、子カテゴリーを持つ親カテゴリーは選択できないようにする。

    調べたら何件か情報があったけど、どれも若干古くて動かなかったりしたのでWP最新版+php7でも動くように修正しました。




    functions.phpに以下を記述(コピペでOK)

    <?php
    require_once(ABSPATH . '/wp-admin/includes/template.php');
    class Nocheck_Category_Checklist extends Walker_Category_Checklist {
    
      function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
        extract($args);
        if ( empty( $taxonomy ) )
          $taxonomy = 'category';
    
        if ( $taxonomy == 'category' )
          $name = 'post_category';
        else
          $name = 'tax_input['.$taxonomy.']';
    
        $class = in_array( $category->term_id, $popular_cats ) ? ' class="popular-category"' : '';
        $cat_child = get_term_children( $category->term_id, $taxonomy );
    
        if( !empty( $cat_child ) ) {
          $output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" . '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' . checked( in_array( $category->term_id, $selected_cats ), true, false ) . disabled( empty( $args['disabled'] ), true, false ) . ' /> ' . esc_html( apply_filters('the_category', $category->name )) . '</label>';
        } else {
          $output .= "\n<li id='{$taxonomy}-{$category->term_id}'$class>" . '<label class="selectit"><input value="' . $category->term_id . '" type="checkbox" name="'.$name.'[]" id="in-'.$taxonomy.'-' . $category->term_id . '"' . checked( in_array( $category->term_id, $selected_cats ), true, false ) . disabled( empty( $args['disabled'] ), false, false ) . ' /> ' . esc_html( apply_filters('the_category', $category->name )) . '</label>';
        }
      }
    
    }
    
    function wp_category_terms_checklist_no_top( $args, $post_id = null ) {
      $args['checked_ontop'] = false;
      $args['walker'] = new Nocheck_Category_Checklist();
      return $args;
    }
    add_action( 'wp_terms_checklist_args', 'wp_category_terms_checklist_no_top' );

     

    これでよし。

    古いコードで動かなかった原因は、phpのバージョンによる”extends”の仕様変更(引数のデフォルト値が同じじゃないとだめ)と、WPのバージョンに伴い”get_category_children()”という関数が使えなくなっていたからでした。

    このコードも今は動いていますが、そのうち動かなくなる日が来るかもですね!

     

    現場からは以上です。

  • WordPress 投稿内やウィジェットでphpファイルを読み込めるようにする方法

    WordPress 投稿内やウィジェットでphpファイルを読み込めるようにする方法

    WordPressでは、テンプレートファイルに以下のように書くことで、他のphpファイルを読み込むことができる。

    例えばテーマ内の”hoge.php”というファイルを読み込みたかったら、

    get_template_part('hoge');

    と書けばOK。しかしこれはphpなので、投稿とかでは使えません。固定ページの途中でループを使いたいんじゃ…といったことがたまにあると思います。




    そこで今回はこれを、投稿内やウィジェットでも読み込めるようにします。

    基本的に、投稿やテキストウィジェット内でphpを使えるようになるプラグイン”PHP Execution”はセキュリティ上使わないほうがいいので、ショートコードを使って読み込むことにする。

     

    functions.phpに以下を記述。

    <?php
    // テンプレート呼び出し用ショートコード
    function my_php_Include( $params = array() ) {
      extract( shortcode_atts(array('file' => 'default'), $params ) );
      ob_start();
      get_template_part( $file );
      return ob_get_clean();
     }
     add_shortcode('myphp','my_php_Include');

    これで、投稿内で”hoge.php”を読み込みたい場合は

    [myphp file='hoge']

    とショートコードを書けばOK。

    “hoge”の部分を変えれば他のファイルも読み込めます。

     

    ウィジェットの「テキスト」でも使いたい場合は、ウィジェットでショートコードを使えるようになる以下のコードをfunctions.phpに追加する。

    add_filter('widget_text', 'do_shortcode' ); //ウィジェットでショートコードを使う

    これでテキストウィジェットでもショートコードが使えます。

     

    現場からは以上です。

  • フォームに全角や日本語を入力すると消えてしまうときに疑うこと

    フォームに全角や日本語を入力すると消えてしまうときに疑うこと

    お問い合わせフォームとかで、フォームに日本語や全角テキストを入力すると、うまくPOSTできずに消えてしまう事案が発生。

    原因は、phpの文字コード設定にありました。




    php.iniの設定を見る

    既にphp.iniがサーバーによって用意されている場合は、php.iniを確認してみましょう。

    php.iniの場所がわからないときは

    現在読み込まれているphp.iniは、phpinfo()によって確認できます。

    info.php等適当なphpファイルを作り、以下のようにコードを書きます

    <?php phpinfo(); ?>

     

    書いたらファイルをFTPでサーバーにアップし、ファイルにアクセス。

    すると、現在利用されているphpの情報が表示されます。これは使う機会が多いので覚えておきましょう

    上の画像が、現在読み込まれているphp.iniです。

    php.iniの場所がわかったら、FTPでphp.iniをダウンロードし、ファイルを開きます。

    下記のような部分があったら修正しましょう

    mbstring.internal_encoding = EUC-JP

    mbstring.internal_encoding = UTF-8

    修正したらアップし、フォームの動作を確認してください。



    別のphp.iniがある場合

    あれれ?サーバーが用意したphp.ini以外にも、ルートディレクトリなんかにもphp.iniがあるぞ?

    という場合が稀にあります。たぶん、WordPressを使うにあたってサーバーのデフォルトのphp.iniじゃ話にならないので、誰かが新たに自前のphp.iniを追加したんでしょうね。また、サーバーによってはもとからここに置いてある場合もあります。いろいろ大人の事情があるんでしょう。

     

    まずはその別php.iniを開いて中身を読んでみて、’mbstring.internal_encoding = UTF-8‘という内容が書かれているにも関わらずエラーが出る場合、なんらかの理由でこのphp.iniが読み込まれていない可能性が高いです。

    前章で説明したphp.iniの場所探しで、この別php.iniが読み込まれていない場合、.htaccessを見てみてください。

    下記のような表記があるでしょうか?あるかもしれませんし、ないかもしれません

    setenv PHPRC /home/xxx.com/html/

    このコードは、別php.iniを読み込むためのコードです。

     

    ない場合は追加しましょう。php.iniが置いてある場所を絶対パスで指定します。

    ある場合は、内容が間違っていないか確認します。

    絶対パスがわからないときは

    適当なphpファイルに下記コードを書き、アップしてアクセス。

    <?php echo __FILE__; ?>

     

    WordPressを使っている場合は要注意

    で、今回なんでこんなエラーが出たかというと、WordPressでパーマリンクを変更した際に.htaccessが上書きされ、php.ini読み込み部分のコードが消えてしまったのが原因です。

    なかなかホラーですよね…

    何かサイト全体、もしくはフォームに影響がありそうな変更があった場合はフォームの動作確認を必ずしましょう。特にコンバージョンに関わる部分にエラーが出るとやばいですからね。。

     

    がんばれWordPressマン!

  • jQuery – アコーディオンを開いたら、他のアコーディオンが閉じるようにする

    jQuery – アコーディオンを開いたら、他のアコーディオンが閉じるようにする

    複数のアコーディオンがあるとき、全部開くとすごいことになるので、1つ開いたら他のアコーディオンは閉じるようにしてほしいというご要望。




    ソースは以下の通り

    var parent = $('dt');
    parent.each(function(){
    	var self = $(this);
    	self.on('click',function(){
    		parent.not(self).next('dd').slideUp(300);
    		self.next('dd').slideToggle(300);
    	});
    });

     

    dtをクリックしたら、その次のddがslideToggleするよというコードですが、クリックしてないdtの次のddは閉じるようにしてやります。

    ポイントは、$(this)を変数’self’に格納して使いやすくしたうえで、‘.not(self)’で「$(this)以外」という指定をしている点。$(this)も変数に格納できるんですね!これに気づけばいろいろ捗りそう。

     

    現場からは以上です。

  • 【簡単】slick.jsで無限ループスライダー

    【簡単】slick.jsで無限ループスライダー

    この記事の方法はちょっと苦しいので、プラグインなしで実装する方法も紹介しています!

    ゆっくり流れる無限ループスライダー(逆方向も)

    ホームページ上にスライドショーを実装するとき、いつもお世話になっているslick.jsで、画像がずっと流れ続ける無限ループスライダーを実装。




    実装

    ソースは以下

    $('#slider').slick({
      slidesToShow: 5,
      centerMode: true,
      arrows: false,
      autoplay: true,
      autoplaySpeed: 0, //待ち時間を0に
      speed: 10000, // スピードをゆっくり
      swipe: false, // 操作による切り替えはさせない
      cssEase: 'linear', // 切り替えイージングを'linear'に
      // 以下、操作後に止まってしまう仕様の対策
      pauseOnFocus: false,
      pauseOnHover: false,
      pauseOnDotsHover: false,
    
      // 以下、レスポンシブ
      responsive: [
        {
          breakpoint: 750,
          settings: {
            slidesToShow: 3,
          }
        }
      ]
    });

    要するに、「常に均等なスピードでゆっくり動いていれば」それっぽい感じになるので、

    ・待ち時間をなくす
    ・スピードを遅くする
    ・イージングを’linear’にする

    といった設定をしてやればOK。

    ちょっとガタつくかなーと思ったら、

    slidesToScroll: 5

    とかで一気に動かしてやると、いい感じになる。

    現場からは以上です。

  • 【超シンプル】デザインが苦手なエンジニアでもできる、配色の決め方

    【超シンプル】デザインが苦手なエンジニアでもできる、配色の決め方

    自分でサイト作ったりサービス作ったりしたいけど、デザインができない。装飾とか無理。イラレ?パス?

    最近はCSSフレームワークが主流になっているから、デザインそこまでがっつりしなくてもサイトやサービスを作れるけど、配色とかどないしよ…赤、黒、白、青くらいしか使えんわ

     

    そんなエンジニアのみなさんでも、配色をいい感じにできる方法を紹介します。エンジニアだけでなく、初心者デザイナーの皆さんにも何かヒントになることがあるかもしれません。

    本記事の概要は以下の通りです。

    1. 配色の基本中の基本を知る
    2. イメージからメインカラーを選ぶ
    3. メインカラーからベース、アクセントカラーを選ぶ

    それではいってみましょう。




    配色の基本

    配色を決める前に、まずは配色は基本的なルールを知っておきましょう。

    3つのカラーの法則

    配色を決める際、基本となるのがこの「3つのカラーの法則」。

    • ベースカラー
    • メインカラー
    • アクセントカラー

    この3つのカラーを、ベース:メイン:アクセント=70:25:5で使用するのが美しいとされています。

    ベースカラー

    サイトやサービスの背景、余白等に用いられる色。部屋でいうと床です。

    メインカラー

    サイトの印象となる色。部屋で言うと家具ですね。ベースカラーの類似色をとるか、全然違う色をとるかの2パターンあります。その色の決め方も後で紹介します。

    ベースが白、黒、灰色等の無彩色の場合は何色でもいけますね。

    アクセントカラー

    サイトのアクセントとなる色で、ボタンやアイコン等に使用されます。部屋で言うとインテリア

    これも基本は、メインカラーとは全然違う色を選びます。ユーザーの目線を誘導する役割がありますので、注目してほしい大事な部分等に使いましょう。

     

    例えば僕のサイトの場合、

    ベースカラー(背景色)…灰色
    メインカラー…黒
    アクセントカラー…青

    といった感じですね。黄色マーカーとか赤線は文章を強調するためのものなので、一旦置いときましょう。別枠です。

    また、おもちゃ屋さんや子供向けサイトのようなめっちゃいろんな色を使うパターンもありますが、非デザイナーには正直厳しいと思いますので、特に理由がない場合は避けましょう。



    メインカラーを決める

    基本の配色ルールがわかったところで、さっそくメインカラーを決めましょう。

    メインカラーはだいたい以下のような方法で決めることができます。

    ロゴと同じ色

    非常によくある手法で、既にロゴがある場合はそのロゴに色を合わせる方法。

    いや、ロゴの色も決まってないし!という場合は、メインカラーを先に決めてロゴを決めるのもあり。

    イメージから選ぶ

    色には、それぞれの色が見る者に与えるイメージを持っています。

    これを利用し、ユーザーにどのようなイメージを持ってほしいか、もしくは自分が制作するサイトに込めたいイメージからカラーを選択します。

    自分のプロフィール用サイトとかなら、パーソナルカラー診断をやってみるのもおもしろいでしょう。

    この方法は、以下のサイトが役に立ちます。大変ありがたいですね。


    カラー配色で迷わない!シーン別配色見本32パターン

    「柔らかなイメージ」「大人の男性的なイメージ」「明るくポップなイメージ」などから色のカテゴリーを選び、その中でも暖色系(赤、橙、黄)にするのか、寒色系(青、緑、紫)にするのかといったように色を絞りましょう。

    ここにセンスは関係ありません。あるのは心理学に基づく確かな効果です。

     

    ベースカラーを決める

    メインカラーが決まったら、そこからベースカラーを決めていきます。

    これにもルールがあり、そして役に立つツールがあります。

    Adobe カラーホイール

    配色のパターンに従って、色を提案してくれるツール。自分で調整してしっくりくる色を選ぶこともできます。左上にカラーハーモニーというセレクトボックスがあるので、そこからどんな色の組み合わせにするのかを決めましょう。

    「探索」でいろんな人の作ったカラーテーマを見ることができますので、眺めてみるのもおもしろいです。

     

    よく使う配色パターンは、以下の3つ。

    似ている色を選ぶ

    メインカラーと似ている色を選ぶことで、サイト全体に統一感を持たせます。基本はこれ。

    カラーハーモニーでいうところの、「類似色」「モノクロマティック」「シェード」といったパターン。

    違う色を選ぶ

    メインカラーと違う色を選ぶことで、コントラストが生まれサイトにメリハリを与えます。

    カラーハーモニーで言うところの、「補色」「トライアド」といったパターン。

    明度が高い色でこれをやると目が疲れる組み合わせが生まれることがありますので、注意しましょう。やや中級者向けかもしれません。

    無彩色を選ぶ

    黒、白、灰色など、何にでも合わせられるベースカラーを選ぶ方法。

    この方法だとテキストが見づらいといったことが起きにくいので、無難。よく使われている方法ですね。



    アクセントカラーを選ぶ

    メインカラー、ベースカラーが決まったら、最後はアクセントカラーです。

    これはなるべくメインカラーから遠いものを選び目立たせる必要がありますので、カラーホイールで「補色」に近い色を選ぶのが鉄板です。

    なんか色がきついなーと思ったら、明度を少し落とすだけでも意外としっくりきます。

    ボタンやアイコン、ちょっとしたアクセントなどに使いましょう。割合としては5%なので、使いすぎに注意。

     

    おわり

    今回は、配色について全然わからんし迷うという人のために、基本に沿って簡単に配色を決定する方法を紹介しました。

    もちろん、ここに書いてある方法以外にもテクニックはありますので、深く調べてみるのもおもしろいです。例えば、「和」な色の組み合わせとか、ハロウィンの色、クリスマスの色等、既にテーマカラーが決まっているものもありますよね。

     

    配色は、もちろんセンスを磨くことも必要ですが、基本は科学や心理学に基づいた色の選び方がちゃんとあるということですね。つくづく実感しますが、デザイナーさんってすごいですよね…デザインの勉強は奥が深すぎる。

    ではでは、良い配色ライフを!

  • Windows10のOpenSSHでconfig使ってSSH接続

    Windows10のOpenSSHでconfig使ってSSH接続

    Windows10に搭載されているOpenSSHを使って、configを読んでSSH接続する方法がやっとわかったので、備忘録として記載。




    ‘config’,’秘密鍵ファイル’,’known_hosts’の3つのファイルが先方から送られてきたものの、それをどうすればいいかわからず四苦八苦した。先方にやり方がわかりませんと聞いてみたけど、先方も「Windowsはちょっとわからないので、がんばって調べてみてください」とのこと…まぁそりゃそうだよね…世間はWindowsエンジニアに厳しい。

    いろいろ調べたところ、どうやら’.ssh’というディレクトリに上記3つのファイルを置いて、普通ならコマンドプロンプトで

    ssh hoge

    と打つだけでSSH接続ができるらしい。というところまではわかった。

    ところが’.ssh’がどこにあるのかがわからなかったレベルで、ようやく置き場所がわかって接続もできたよというお話です。

    OpenSSHの確認

    まずWindows10のOpenSSHが入っているかチェックしましょう。

    ssh -V

    以下のように出れば入ってます

    OpenSSH_for_Windows_7.6p1, LibreSSL 2.6.4

    入ってなければインストールしましょう。

    ちなみに、Git付属のOpenSSHを使っている場合は、使用方法がいろいろ違うらしいので、あんまり使わないほうがいいんじゃないですかね…ややこしいです。

     

    configの記述方法と設置場所

    SSH接続する際、configというファイルを作ってそれを読み込むことで接続が簡単になります。configがないといろいろ大変です。

    configの置き場所

    configの置き場所は以下。

    C:\Users\ユーザー名\.ssh

    OpenSSHがインストールされていれば、既にそこに’.ssh’あるはず。
    なければディレクトリを作りましょう。

    このディレクトリに、”config”という名前のファイルを、拡張子なしで作成します。
    ちなみに、秘密鍵(.key)もこのディレクトリに置くのが一般的です。

    configの記述方法

    configの基本的な記述方法は以下のような感じ

    host hoge
    	user hogehoge
    	hostname hogehoge.com
    	port 22
    	identityfile ~/.ssh/hoge.key
    Host 接続名(任意)
    この名前をもとに、「ssh hoge」と入力します。
    HostName ホスト名
    User ログインユーザ名
    port ポート番号
    IdentityFile 秘密鍵へのパス

    また、一つのconfigファイルで複数のssh接続設定ができます。

    host hoge
    	user hogehoge
    	hostname hogehoge.com
    	port 22
    	identityfile ~/.ssh/hoge.key
    
    host fuga
    	user fugafuga
    	hostname fugafuga.com
    	port 22
    	identityfile ~/.ssh/fuga.key

    接続!

    コマンドプロンプトで以下のように入力。

    ssh hoge

    接続できましたでしょうか。

    現場からは以上です。