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 のグループフィールドに反映させる” の 続きを読む »