2019年12月8日 カテゴリー: WordPress
この記事は2019年12月8日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress でそのサイトの仕様や特性に合ったカスタマイズを行っていると、どうしたら実現できるんだろう？という問題に遭遇することが度々あります。
今回、ある固定ページのメインクエリの中で、カスタム投稿タイプAの投稿の内容を WP_Query を使ったサブクエリで出力し、そのループの中で、各投稿を関連付けたカスタム投稿タイプBの投稿を抽出して、そのパーマリンクを出力したいという事案が発生しました。つまり、WP_Query によるサブクエリのループの中に、別の WP_Query によるサブクエリを入れ子で使うということです。
カスタム投稿タイプBには、Advanced Custom Fields プラグインの“関連”フィールドタイプを使って、カスタム投稿タイプAの投稿を指定するようにしています。
そもそも逆で、カスタム投稿タイプAからカスタム投稿タイプBの投稿を指定するようにすれば、WP_Query を入れ子にしなくても、普通にカスタム投稿タイプAの投稿の内容を出力する中で、カスタム投稿タイプBの投稿のパーマリンクを出力できます。
しかし今回の案件は、カスタム投稿タイプBからカスタム投稿タイプAの投稿を指定する方が、運用する上で編集が簡単でミスが少ないと考え、テーマ側で何とか実現できないかと探ってみることにました。
“WorePressループでサブクエリ WP_Query を入れ子で使う” の 続きを読む »
2019年11月11日 カテゴリー: WordPress
この記事は2019年11月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。
なんだかよくわからないタイトルですが…
ユーザープロフィールに ACF で各種フィールドを追加して、ユーザーアーカイブページで会員情報を表示するのが標準的で簡単な手法かと思いますが、今回ユーザー自身に標準のプロフィール項目以外を編集させたくないということで、カスタム投稿タイプで会員ページを作成することにしました。
また、多くのカスタムフィールドを追加するので、プロフィール画面より投稿画面の方が見やすいというのもありますし、標準のユーザーアーカイブを使わないので、URL からユーザー名がわかってしまうというセキュリティ上の問題も回避できます。
“カスタム投稿タイプの投稿ページに、ACFで紐つけたユーザーの投稿を表示する” の 続きを読む »
2019年10月14日 カテゴリー: WordPress
この記事は2019年10月14日に書かれたものです。情報が古い可能性がありますのでご注意ください。
カスタム投稿タイプのパーマリンク設定でカスタムタクソノミーを含めた場合、そのタクソノミータームに親子関係があると、それが階層的に設定されます。
パーマリンク設定
https://www.example.com/custom-post-slug/%custom_taxonomy_slug%/%postname%/
親タームがあるときの URL
https://www.example.com/custom-post-slug/親ターム/子ターム/投稿名/
今回、URL から子孫タームは削除して親タームのみとしたい案件があり、ググってみると、投稿のパーマリンクでカテゴリを含めた場合に子カテゴリを削除する方法はいくつか見つかりましたが、カスタムタクソノミーの例は見つからず、試行錯誤してみました。
“カスタム投稿のパーマリンクからカスタムタクソノミーの子孫タームを削除する” の 続きを読む »
2019年9月26日 カテゴリー: HTML/CSS/JS , アクセシビリティ
この記事は2019年9月26日に書かれたものです。情報が古い可能性がありますのでご注意ください。
9月20日に iPhone 向けソフトウェア iOS 13 の配信が開始されました。その後すぐ25日に iOS 13.1 と、iOS から iPad 向けに独立した iPadOS 13.1 が配信されています。
iOS 13・iPadOS 13（以下まとめて iOS 13 とします）はダークモードをはじめ、数々の新機能が搭載されていますが、その中で、Webブラウザの Safari にWebページの文字を簡単に拡大／縮小できる機能が追加されました。アドレスバー左側の A A をタップすると拡大／縮小などのオプションが表示されます。
ところがこれ、実際は文字だけの拡大／縮小ではなく、ページ全体の拡大／縮小となっていました。つまり macOS の Safari の拡大／縮小と同じ動きです。
macOS の Safari の場合は、[option]キーを併用することで文字だけを拡大／縮小することができるのですが、iOS ではその術が見つかりません。実際、iOS はピンチアウトでズームができるので（viewport の設定によりますが）、iPhone の小さな画面では文字だけが拡大できた方がいいと思うのですが…。
“iOS 13 Safari で文字の拡大／縮小が簡単になったことの影響” の 続きを読む »
2019年9月15日 カテゴリー: WordPress
この記事は2019年9月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のメールフォームプラグイン MW WP Form を利用しているサイトの一つで、下記のように各項目の内容が空のメールが送信される現象がありました。
お問い合わせフォームより送信されました。
メールに送信元の情報を記載するようにしているので、そのIPアドレスを調べてみたら、発信元はロシアで、いくつかのスパムレポート（ブラックリスト）に載っていました。
各項目は必須項目となっていますが、そのチェックに引っ掛からずに送信されてます。恐らく、スパムボットによって直接メールフォームプログラムにアクセスして送信されているものと思われますが、その内容が、不正サイトに誘導するわけでもなく、空なのでスパム行為の意図が不明です。
でも、頻繁に空メールが送られてくるのは鬱陶しいので、対策を施してみました。
“MW WP Form で空メールが送信される現象とその対策” の 続きを読む »
2019年7月6日 カテゴリー: HTML/CSS/JS
この記事は2019年7月6日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Instagram のフィードを簡単にWebサイトに埋め込みむことができる無料サービス InstaWidget が、最近何度かダウンすることがあり、それを埋め込んでいるページ全体の読み込みに影響がありました。
SnapWidget や WordPress のプラグインである Instagram Feed は、利用するためには Instagram のアカウントで認証する必要があるため、クライアント案件ではハードルがあり、別のサービスを探していたところ、複眼feed という無料サービスがありました。
この複眼feed、Instagram に限らず、Facebook や Twitter、Youtube、Tumblr など、様々な SNS やブログ等のフィードから写真や動画を抽出して埋め込むことができ、さらに Instagram の写真は Instagram のサイトに飛んでくれるなど、とても良い感じなのですが、サムネイルのサイズが設定したサイズ（px）に固定されるため、レスポンシブでないところが難点です。複眼feed ではレスポンシブとうたってありますが、PC からのアクセスとスマホ等からのアクセスとでレイアウトを切り替えることができるというもので、PC レイアウトの可変幅には対応していません。
ただ、埋め込まれた状態の HTML を確認すると、table タグで直接埋め込まれており、よくある iframe 方式ではないので、CSS を使って上書きすることができます。
“複眼feed を可変幅のレスポンシブにする” の 続きを読む »
2019年6月22日 カテゴリー: WordPress
この記事は2019年6月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のメールフォームプラグインといえば、Contact Form 7 と MW WP Form が有名ですが、それぞれに特徴があり、案件によって使い分けています。
簡単にフォームを作成できて、追加のプラグイン等による機能拡張が多いのが Contact Form 7、細かい設定ができて、出力される HTML をコントロールしやすいのが MW WP Form かなと感じています。
このたび、既に Contact Form 7 を使っているサイトで、新たなフォームの作成案件があり、その中に星形の5段階評価を付ける項目がありました。星形のインターフェイスは必須ではなかったのですが、要望ですし、フォームに（Contact Form 7 でというわけではなく）星形の5段階評価を作成する方法は、検索するといくつか紹介されていますので、できないことはないだろうと、実装してみました。
“Contact Form 7 で星形の5段階評価を作成” の 続きを読む »
2019年6月17日 カテゴリー: WordPress
この記事は2019年6月17日に書かれたものです。情報が古い可能性がありますのでご注意ください。
マルチサイト環境で新たなサイトを作成する場合、サイトや各種プラグインの設定、カスタムフィールド など、サイト毎に一から設定しなければなりません。
そのため、例えばマルチサイトで多言語サイトを構築していて、同じ構成で新たな言語を追加したい場合など、既に存在しているサイトと同等のサイトを新たに作ろうとするとき、上記に加えて沢山の固定ページや問い合わせフォームも作成しようとすると、かなり工数がかかります。固定ページなどは既存サイトからエクスポートしてそれを新しいサイトにインポートすることもできますが、WordPress の機能ではカスタムフィールドの内容はエクスポートされません。
そこで、既存のサイトを複製して新たなサイトを作り、それを元に必要な箇所を修正することができればと情報を探してみましたが、求めるものが見つからなかったので、既存サイトのデータベースを流用して実行してみました。
“マルチサイト内でサイトを複製する” の 続きを読む »
2019年6月15日 カテゴリー: WordPress
この記事は2019年6月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。
Instagram のフィードをWebサイトに埋め込みむ場合、手軽に埋め込むことができるサービスとして InstaWidget がありますが、無料サービスゆえにサムネイルのリンク先が InstaWidget のサイトで開き、尚且つ広告が表示されるのが難点です。Google Analytics による広告なので、特に企業サイトなどでは競合他社の広告が表示されることも…。
そこで他にいいサービスが無いかと探してみたところ、WordPress のサイトであれば Instagram Feed という有名なプラグインがあったのですね。灯台下暗しでした。
この Instagram Feed、無料版と Instagram Feed Pro という有料版があり、有料版ではハッシュタグが使えたり、フィードの見た目もいろいろカスタマイズできますが、無料版は機能が限られています。それでも、複数のアカウントを統合して時系列順に表示できますし、何よりサムネイルのリンク先が Instagram のサイトで開き、広告表示が無いのが助かります。
この無料版で、サムネイルにマウスオーバーした際に写真のキャプションを表示することができないかと思い、探ってみました。
“Instagram Feed の無料版で写真のキャプションを表示” の 続きを読む »
2019年6月12日 カテゴリー: HTML/CSS/JS , WordPress
この記事は2019年6月12日に書かれたものです。情報が古い可能性がありますのでご注意ください。
WordPress のサイトから RSS フィードを取得して表示する場合、RSS フィードからデフォルトで取得できる情報は、タイトル、パーマリンク、投稿日、投稿者、概要（本文）くらいで、アイキャッチ画像を取得することはできません。そもそもアイキャッチ画像は RSS フィードに含まれていないので当然です。
そこで、WordPress の RSS テンプレートを加工してアイキャッチ画像を含め、別のサイトでこの RSS フィードを取得して表示してみました。（RSS フィード発信元の WordPress サイトの管理者権限があることが前提です。）
“RSS フィードにアイキャッチ画像を含めて別のサイトで表示する” の 続きを読む »
