2020年10月10日 カテゴリー: HTML/CSS/JS
この記事は2020年10月10日に書かれたものです。情報が古い可能性がありますのでご注意ください。
bxSlider でカルーセル表示をするとき、1枚目（カレント）のスライドが左端に表示されます。これを中央に表示したいのですが、bxSlider のオプションにはそのような設定はありません。
常に3枚のスライドを表示して1枚目を中央に表示する方法とか、1枚を表示してその左右に前後のスライドの一部を表示する方法は様々な記事で紹介されているのですが、それらは表示枚数が固定であることが前提です。
しかし今回やりたかったのは、画面の幅に応じて一度に表示されるスライドの数が変動する場合に、1枚目（カレント）のスライドを中央に配置すること。つまり、レスポンシブ対応で画面幅が違っても各スライドのサイズは変わらず、例えば PC 画面では5枚、タブレット端末では3枚、スマホでは1枚が表示され、その1枚目（カレント）を中央に、さらに左右には前後のスライドの一部が見えている状態にしたいということです。
そして試行錯誤の末、以下の方法で実現することができました。試行錯誤の割には、CSS でマージンを設定するだけという、実に単純なものですがw
“bxSlider のカルーセルで一度に複数枚を表示する場合に1枚目を画面の中央に配置する” の 続きを読む »
2020年9月20日 カテゴリー: HTML/CSS/JS
この記事は2020年9月20日に書かれたものです。情報が古い可能性がありますのでご注意ください。
当Webサイト内、Web制作&システム開発サイトの制作実績ページ で表示しているWebページのサムネイル。当初はサムネイル自動生成ツールを使用していました。その後、半年前から各々の制作実績のページでレスポンシブ Web デザインによる PC、タブレット、スマホそれぞれの画面を表示するようにしたのですが、サムネイル自動生成ツールではPC画面を縮小して取得することしかできず。仕方なく、それぞれのスクリーンショットを撮って貼り付けてました。
しかし、新しいサイトを追加する度に3種類のスクリーンショットを撮る必要がありますし、時が経つとスクリーンショットが古くなるので定期的に撮り直す必要があり。そこで、少々強引ですが、Webページそのものの PC、タブレット、スマホそれぞれのサイズの画面を、インラインフレーム（ iframe タグ）で埋め込んで表示することにしました。
ただ、それぞれのサイズのWebページをサムネイルのように縮小表示する必要があり、更にレスポンシブにも対応させる必要がありました。
“iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応）” の 続きを読む »
2020年8月9日 カテゴリー: WordPress
この記事は2020年8月9日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress の投稿を自動で Facebook ページに投稿したい案件があり、当初、自動投稿に特化し機能も豊富な NextScripts: Social Networks Auto-Poster (SNAP) というプラグインを使用しようと設定を進めていましたが、“Invalid Scopes: manage_pages, publish_pages. ” という警告が出て、どうにも連携することができず。
どうも、テストアプリを作成したり、レビュー申請ビデオを作成して Facebook の審査を受けなければならないなど、いろいろ面倒っぽいので、SNAP の利用は諦め、API が不要な Jetpack プラグインを利用することにしました。Jetpack はアクセス解析やセキュリティ対策など、30種類以上もの機能がパックになっているプラグインですが、この中にある Facebook や Twitter などの SNS と連携できる「パブリサイズ共有」の機能を使用します。
ただ、自動投稿に特化したプラグインではないので、デフォルトではカスタム投稿タイプに対応していません。また、今回カスタム投稿タイプの投稿全てと、標準の投稿の内、特定のカテゴリの投稿のみを Facebook に自動投稿せる必要があるのですが、カテゴリを選択できる機能もないので、カスタマイズしてみました。
“Jetpack のパブリサイズ共有をカスタム投稿タイプと特定のカテゴリの投稿のみに適用する” の 続きを読む »
2020年7月11日 カテゴリー: WordPress
この記事は2020年7月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress からカスタム投稿タイプの投稿データとそれに関連するデータを CSV で出力したい案件があり、テーマの中のテンプレートを使って実現してみました。
投稿データを CSV で出力できるプラグインはあるようですが、今回一定の条件で絞り込んだり、Advanced Custom Fields の「投稿オブジェクト」カスタムフィールドで紐付けた、別のカスタム投稿タイプの投稿データを一緒に出力する必要があったため、特定のページのテンプレートを作成する要領で実現できないかと考えました。
7年くらい前まで Movable Type を使っていましたが、Movable Type のテンプレートは静的ファイルを書き出すので、書き出すファイル名と拡張子を指定すれば、CSV などのテキストファイルを書き出すことも、CSS や JavaScript のファイルに MT タグを使って、セレクタや値を代入したり変数をループで処理したりすることができました。
一方、WordPress のテンプレートは動的に Web ページを表示するものなので、Movable Type のように簡単には行きません。
でも、以前 WordPress に FullCalendar を組み込んだ際、カレンダーに投稿データを読み込むための JSON 形式のファイルをテンプレートを使って作成したり、同じように Google Map に投稿データからマーカーを生成するための XML 形式のファイルをテンプレートを使って作成した経験がありましたので、まずは同様の方法で CSV 形式のファイルを作成してみました。
“WordPress からテーマのテンプレートを使って CSV を書き出す” の 続きを読む »
2020年7月7日 カテゴリー: WordPress
この記事は2020年7月7日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress でメールフォームから送信されたデータを元に、自動で投稿を作成したい案件があり、調べてみたら Contact Form 7 を使うと実装できることがわかりました。
ContactForm7のフォーム送信時に自動でブログ記事を作成する方法
Contact Form 7 で用意されているフック「wpcf7_mail_sent」を利用して投稿を作成できるというもので、カスタムフィールドの値も登録することができ、まさに実現したい仕様でしたが、今回、Advanced Custom Fields (ACF) プラグインのグループフィールドのサブフィールドにもデータを登録する必要がありました。
そこで、次の記事を参考にして、上記の方法と組み合わせることで実現することができました。
【WordPress】PHPプログラムからAdvanced Custom Fieldsの繰り返しフィールドに値を保存する方法 – 上尾市のWEBプログラマーによるブログ
更に、Contact Form 7 Serial Numbers プラグインによる連番も取得してカスタムフィールドに反映してみました。
“Contact Form 7 の送信データから自動で投稿を作成し、ACF のグループフィールドに反映させる” の 続きを読む »
2020年6月14日 カテゴリー: HTML/CSS/JS
この記事は2020年6月14日に書かれたものです。情報が古い可能性がありますのでご注意ください。
主に静的サイトにメールフォームを設置する際、TransmitMail をよく利用させていただいています。TransmitMail は Copyright 表示不要の PHP 製汎用メールフォームシステムで、ファイルの添付や CSV 出力など、柔軟で豊富な機能が特徴です。
一方 WordPress 案件では、用途に応じてプラグインの WP MW Form や ContactForm 7 を利用していますが、場合によってはこの TransmitMail をテーマに組み込んで利用することもあります。
ただ、TransmitMail はメールヘッダに Reply-To（返信先アドレス）を設定することができません。ググってもその方法が見つかりませんでしたので、私なりにカスタマイズしてみました。
“TransmitMail で Reply-To ヘッダを設定する” の 続きを読む »
2020年6月3日 カテゴリー: WordPress
この記事は2020年6月3日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のバージョンを 5.2 から 5.4 にアップグレードしました。昨年11月に 5.3 がリリースされていましたがアップグレードを保留していたので、1世代超えてのメジャーバージョンアップとなりました。
するとあるサイトで、Advanced Custom Fields (ACF) プラグインのデイトピッカーで設定した日付が、1日前の日付で表示されるというトラブルが発生しました。時刻を設定してないので確認できませんが、正確には UTC との時差である9時間前なのかもしれません。
調べてみると、WordPress 5.3 で日付と時刻の処理が大きく変更（改善）されたようで、“PHPのタイムゾーンを date_default_timezone_set() で変更しないでください”ということのようです。
当該サイトは date_default_timezone_set('Asia/Tokyo'); として、date() で現在の日時を取得していたため、今回のバージョンアップで誤作動を起こしたようです。
そもそも、当初から date_default_timezone_set() を使わず、date() ではなく WordPress 独自の date_i18n() を使えばよかったんですね。
さらに、date_i18n() についても WordPress 5.3 からこの代わりとなる wp_date() という関数が新たに追加されたようです。
2020年5月31日 カテゴリー: WordPress
この記事は2020年5月31日に書かれたものです。情報が古い可能性がありますのでご注意ください。
2ヵ月前にこのブログで、TinyMCE Advanced が 5.2.0 にアップッデートされてから、テーブルのセルの枠線のドラッグを無効にして勝手に width や height が設定されないようにしてても、テーブルを挿入する際に強制的に全てのセルに均等の width が設定されてしまうことを書きました。TinyMCE Advanced のテーブルで勝手に設定される width 対策（妥協策） ）
その際は、width を設定させない解決策が見つからず、妥協策としてドラッグでサイズを調整できるという利便性を受け入れることにしたのですが、新規に制作するサイトはそれでもいいのですが、過去に制作したサイトは操作方法が変わってしまうので、TinyMCE Advanced をアップデートしないようにしていました。
しかし、セキュリティ面からもいつまでもアップデートしない訳には行かず、再度 width を設定させない方法を探ってみました。
“TinyMCE Advanced のテーブルで勝手に設定される width 対策（解決）” の 続きを読む »
2020年5月29日 カテゴリー: WordPress
この記事は2020年5月29日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress で Google Analytics のトラッキングコードを挿入し、ダッシュボードにそのレポートを表示できるプラグイン「Google Analytics Dashboard for WP (GADWP)」ですが、2020年2月12日にバージョン 6.0.0 になり、名称も「Google Analytics Dashboard for WP by ExactMetrics (旧 GADWP) 」となって、全く別物となってしまいました。
使い勝手が悪いだけでなく、今まで見ることができていた「固定ページ」や「リファラー」などのレポートや集計期間の変更が、有料版でないと見れなくなってしまい、使い物なりません。
しばらく元のバージョンに戻して旧 GADWP のまま使用していましたが、これを再現するプラグイン「GAinWP Google Analytics Integration for WordPress 」が公開されていました。
プラグインの説明にも“It was created from the excellent Google Analytics Dashboard for WordPress (GADWP) plugin ”（GADWP から作成された）とあるように、設定画面の構成が GADWP と若干異なりますが、機能やダッシュボードのレポート表示は GADWP そのものです。
ただ、日本語化されていないのですが、GADWP が元ってことはこの日本語ファイルが使えるのでは？と思い、試してみたらビンゴでした。
GADWP を削除しても言語ファイルは残っていたので、そのファイル名を GAinWP 用に変更するだけです。
wp-content/languages/plugins/ の中にある、google-analytics-dashboard-for-wp-ja.mo と google-analytics-dashboard-for-wp-ja.po という2つのファイルをそれぞれ、ga-in-ja.mo と ga-in-ja.po にリネームして完了です。
設定画面の英語の文章が GADWP と一致しない部分は日本語に変換されませんが、少なくともダッシュボードのレポート表示は日本語化されます。
2020年5月17日 カテゴリー: WordPress
この記事は2020年5月17日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress では、Version 4.3 以降からテーマカスタマイザーを使って管理画面から簡単にサイトアイコンを設定することができます。アイコン画像を一枚用意するだけで、とても簡単に各種のサイトアイコンを設定できるのですが、一つのアイコン画像から favicon（ファビコン）と Web クリップアイコン（apple-touch-icon）、Windows 用アイコンが生成され、これらが公開画面と管理画面、さらにブログカードのサイトアイコンにも適用されるので、アイコンのデザインによっては意図しない残念な結果になることがあります。
例えば、当社ロゴのような丸いアイコンの場合、ブラウザのタブなどに表示される favicon は背景を透過にして円のサイズを大きくしたいのですが、これをWeb クリップアイコンにも使用すると、黒い背景に丸いアイコンが上下左右の余白がない状態で表示されます。
左から、サイトアイコンから生成された、favicon（ブラウザのタブ）、Windows用アイコン（スタートにピン留め）、Webクリップアイコン（iOS）と、本来表示したいWebクリップアイコン だからと言って、テーマカスタマイザーを使わず、普通に head 内にコードを書いて各種サイトアイコンを指定すると、ブログカードに表示されるサイトアイコンが WordPress のロゴになってしまいます。
そこで、テーマカスタマイザーによるサイトアイコンをブログカードだけに使用し、favicon や Web クリップアイコンは個別に用意したものを、一般的な方法で設定する方法を考えてみました。
“WordPress のカスタマイザーによるサイトアイコンをブログカードだけに使用する” の 続きを読む »
