Advanced Custom Fields (ACF) のデイトピッカーの日付がWordPress5.3以降で表示がずれる場合

WordPress5.3になり、日付の内部の管理が更新された。

ACFのデイトピッカーでイベントの日付を入力しているサイトがあり、WordPressを最新に更新した際に報告されてつまづいた。

デイトピッカー

以前に入力したデータも含めて、ちょうど9時間ずれて表示される。

このサイトは、リニューアルで受け持ったために、この表示の部分は前任の書いたままになっている。

確認すると、single.phpの上部に

date_default_timezone_set('Asia/Tokyo');

が入っている、これが原因のようだ。

WordPress 5.3以降はdate_default_timezone_set()でタイムゾーンの変更を行わないようにとの事。この業を削除すると無事正しい時刻で表示されました

また、よくタイムゾーンの問題でPHP標準のdate()ではなくdate_i18n()を使う事で解決するような例もあったが、これも5.3以降でwp_date()という関数が追加されたので、こちらを使うように推奨されている。

いきなりエラーにならないですが、段階的にdate_i18n()は廃止されていくので早めに処理をしていきましょう。

こちらに詳細が記述されています。

make.wordpress.org

htaccessでstripeなどの組込をサイトでテストしている時にwebhookだけベーシック認証をIPではずす

サイト公開前などにベーシック認証を使って閲覧を制限することがあります。

ただ通販や他のAPIを使って最近増えたwebhookでの通信を使う場合、ベーシック認証をサイト全体に使っているとそこの部分のテストができません。

なので、htaccessで特定のIPからの場合だけベーシック認証をはずす設定を追加します。

Stripeを例にあげます。

Stripeのサイトには、IPアドレスのリストが公開されています。

stripe.com

この、

Webhook notifications 

The full list of IP addresses that webhook notifications may come from is:

の下のIPのリストを使います。

.htpasswdにパスワードのフルパスを記述し。

Require valid-userまでで、ベーシック認証をかけます。

AuthUserFile "/var/www/public_html/.htpasswd"
AuthName "Member Site"
AuthType BASIC
Require valid-user

Satisfy Any
Order deny,allow
Allow from 3.18.12.63
Allow from 3.130.192.231
Allow from 13.235.14.237
Allow from 13.235.122.149
Allow from 35.154.171.200
Allow from 52.15.183.38
Allow from 54.187.174.169
Allow from 54.187.205.235
Allow from 54.187.216.72
Allow from 54.241.31.99
Allow from 54.241.31.102
Allow from 54.241.34.107
Deny from all

Satisfy Any

のAllow fromにStripeに記載されていたIPのリストを記述します。

これで、通常の閲覧ではベーシック認証がかかり、何かの操作（カートの決済）などを行った場合のStripeのwebhookだけベーシック認証がかからず通常処理されます。

Stripeのwebhookのエラーコードで確認できます。

他のwebhookを使うAPIでも使う事ができるので試して見てください。

WordPressのメディアライブラリにSVG画像をアップロードできるようにする

ロゴや図など、ベクター画像でできているものは、SVG形式で書き出せば拡大しても劣化しませんし、容量も軽くできます。

※かなりディテールが複雑なものは逆に重くなる場合もあります。

レスポンシブで幅を自由に指定すれば、劣化を気にせず使えるので積極的に使っていきたい形式です。

各ブラウザ対応

2019年4月時点での対応ですが、ほぼ全てのモダンブラウザで対応しています。IE11以前は、マイクロソフトで非サポートとなった事なのでSVGをどしどし使える環境は整いました。

まずサーバーでSVGの対応自体がされていないものをあります。その場合はMIMEタイプの追加設定をしなければいけません。

.htaccessなどで以下のコードを記述します。

AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz

これで、お使いのWEBサーバーでSVGを表示することが可能になります。

 次のWordPressのメディアライブラリで扱うファイルタイプを追加する必要があります。

functions.phpに

function add_file_types_to_uploads($file_types){

    $new_filetypes = array();
    $new_filetypes['svg'] = 'image/svg+xml';
    $file_types = array_merge($file_types, $new_filetypes );

    return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

を追加します。

これでメディアライブラリーにSVGがドラックドロップで追加でき、画像として利用できます。

WordPressの管理画面でユーザーを名前でも検索できるようにする

WordPressのユーザー一覧で、多くのユーザーやゲスト登録をしているサイトなどでは、メールアドレスやユーザー名以外で検索したいと言われる事もあります。

特に名前で検索したいと言われる事が多いため、その方法もメモしておきます。

このように名前を入力していても、右上のユーザー検索に「田中」と入力して検索しても該当なしとなります。

エンドユーザーやクライアントはには、これはできないほうが違和感があるようで、どうして検索できないのか？と聞かれます。

これを、解消するにはuser_queryをfunctions.phpに追記して検索のクエリーを追記します。

function extended_user_search( $user_query ) {
  if ( $user_query->query_vars['search'] ){
    $search = trim( $user_query->query_vars['search'], '*' );
    if ( $_REQUEST['s'] == $search ){
      global $wpdb;

      $user_query->query_from .= " JOIN {$wpdb->usermeta} as UM1 ON UM1.user_id = {$wpdb->users}.ID AND UM1.meta_key = 'first_name'";
      $user_query->query_from .= " JOIN {$wpdb->usermeta} as UM2 ON UM2.user_id = {$wpdb->users}.ID AND UM2.meta_key = 'last_name'";
      $user_query->query_from .= " JOIN {$wpdb->usermeta} as UM3 ON UM3.user_id = {$wpdb->users}.ID AND UM3.meta_key = 'nickname'";

      $user_query->query_where = 'WHERE 1=1' . $user_query->get_search_sql( $search, array( 'user_login', 'user_email', 'user_nicename', 'UM1.meta_value', 'UM2.meta_value', 'UM3.meta_value' ), 'both' );

    }
  }
}
add_action( 'pre_user_query', 'extended_user_search' );

 このコードを追加することで、検索対象が姓・名・ニックネームも追加されます。部分一致になりますので、「田中」でしたら「田」だけでも対象となります。

WordPressでフロントページを固定ページで切り換えた時に、今の固定ページにより表示を切り替える

WordPressではデフォルトのトップページ、WordPressで言うところのfront pageをブログのように自動で最新の投稿の一覧にするか、固定ページを指定して特定の内容にするか選択できる。

設定＞表示設定

のホームページの表示で切り換える事ができる。

商用のウェブサイトで、よく用いられる手法が季節のイベントやシーズンで大きくトップのデザインを変えたい時に、固定ページを切り換える事でデザインや内容を変更し元に戻したり、次々に変えて行く事ができる。

例えば、固定ページに作っておくことで一時的に派手に違うデザインにすることもできる。

これでコンテンツの内容を変える事はできるが、ヘッダーフッダーやスタイルなど、もしくは一部のコードから表示しているコンテンツなどを変更しようと思ったときに、今トップのページが何かを判断してコードを変更できる。

期間でAnalyticsのパラメーターを変えたい時なども使える。

固定ページには、それぞれIDが割り当てられる。

固定ページを、編集して時のURLから抜粋できる。

このURLの?post=の後の数字がページIDになる。この場合19となる。

現在のfront pageのページIDは以下で取得できる。

get_option( 'page_on_front' )

なので、TOPのより処理を変えたい場合は

$front_page_id = get_option( 'page_on_front' );
if($front_page_id == '19'){
　//TOPの時の処理
　}else{
　//TOPクリスマスの時の処理
}

で、変える事ができる。
選んだトップページでスタイルや、効果測定のタグを変えるのも使える。

WordPressでスマホからアップロードされる画像が横向きになるのを防ぐ

WordPressの管理画面もレスポンシブになり、スマホからでも記事を投稿したりカメラで撮影した画像をアップすることができます。

ところが、画像をアップロードすると、思わず横向きになってしまう事があります。

これは、画像の回転情報の属性を判断せずにアップロードしてしまう事が原因です。

スマホで撮影した画像はExifのOrientation属性（90度などの回転情報）を持っているのでそれを読み込めば画像の方向をコントールすることができます。

スマホでは、これを自動的に読み向きを判断しますが、ブラウザやビューワーでは無視され横向きになったりします。

以下のコードをfunctions.phpに入れて適用します。アップされる画像のExifを読み込んで自動で判断し回転して保存するコードです。

---

function my_photo_upload($file) {
    if ($file['type'] == 'image/jpeg') {
        $image = wp_get_image_editor($file['file']);
        if (!is_wp_error($image)) {
            $exif = exif_read_data($file['file']); 
            $orientation = $exif['Orientation']; 
            if (!empty($orientation)) {
                switch ($orientation) {
                    case 8:
                        $image->rotate(90);
                        break;
                    case 3:
                        $image->rotate(180);
                        break;
                    case 6:
                        $image->rotate(-90);
                        break;
                }
            }
            $image->save($file['file']);
        }
    }
    return $file;
}
add_action('wp_handle_upload', 'my_photo_upload');

---

Exifのデータを読み込めば撮影の日付なども読込ことも可能です。試して見て下さい。

MW WP Formでhiddenフィールドに自動で値を入れる

入力フォームで確認画面が出る仕様は日本のガラパゴス仕様なので、対応しているプラグインは必然と国産のプラグインになる。

現在多く使われているプラグインがMW WP Formだ。

ja.wordpress.org

タグをプルダウンでいれていくとフォームができあがります。

ここにhidden fieldを設けて、自動でIPアドレスや、ログインしている場合はユーザー名などを設定したい場合はfunctions.phpにフィルターフックを使う事で可能になります。

 [mwform_hidden name="ip"]

というhiddenフィールドのIPを設ける場合。

function my_mwform_value( $value, $name ) {
    if ( $name === 'ip' ) {
        $getip = $_SERVER['REMOTE_ADDR'];/*IPアドレス取得*/
    return $getip;
    }
    return $value;
}

add_filter( 'mwform_value_mw-wp-form-xxxx', 'my_mwform_value', 10, 2 );

 というコードで、hiddenフィールドに自動でIPアドレスが追加されます。

mwform_value_mw-wp-form-xxxxのxxxxは、実際に作成されたフォームのIDに従ってください。ショートコードと同じ物です。