このページの本文へ

フロントエンドエンジニアのblog

有限会社Willさんいん

Willさんいんのフロントエンドエンジニアの blog です。HTML や CSS、JavaScript などのフロントエンド技術や WordPress のカスタマイズ、Webアクセシビリティなどについて、備忘録を兼ねて不定期で書いています。

カスタム投稿タイプの投稿ページに、ACFで紐つけたユーザーの投稿を表示する

なんだかよくわからないタイトルですが…
複数の会員がお知らせを投稿するサイトで、会員情報のページをカスタム投稿タイプで作成して、Advanced Custom Fields (ACF) プラグインを使ってこのカスタム投稿タイプの投稿(会員ページ)をユーザーに紐つけ、お知らせの一覧やシングルページにはカスタム投稿タイプで作成した会員ページのタイトル(会員名)とパーマリンク を、会員ページにはその会員を紐つけたユーザーが投稿したお知らせの一覧を取得して表示するということです。

ユーザープロフィールに ACF で各種フィールドを追加して、ユーザーアーカイブページで会員情報を表示するのが標準的で簡単な手法かと思いますが、今回ユーザー自身に標準のプロフィール項目以外を編集させたくないということで、カスタム投稿タイプで会員ページを作成することにしました。

また、多くのカスタムフィールドを追加するので、プロフィール画面より投稿画面の方が見やすいというのもありますし、標準のユーザーアーカイブを使わないので、URL からユーザー名がわかってしまうというセキュリティ上の問題も回避できます。

“カスタム投稿タイプの投稿ページに、ACFで紐つけたユーザーの投稿を表示する” の続きを読む »

カスタム投稿のパーマリンクからカスタムタクソノミーの子孫タームを削除する

カスタム投稿タイプのパーマリンク設定でカスタムタクソノミーを含めた場合、そのタクソノミータームに親子関係があると、それが階層的に設定されます。

パーマリンク設定
https://www.example.com/custom-post-slug/%custom_taxonomy_slug%/%postname%/
親タームがあるときの URL
https://www.example.com/custom-post-slug/親ターム/子ターム/投稿名/

今回、URL から子孫タームは削除して親タームのみとしたい案件があり、ググってみると、投稿のパーマリンクでカテゴリを含めた場合に子カテゴリを削除する方法はいくつか見つかりましたが、カスタムタクソノミーの例は見つからず、試行錯誤してみました。

“カスタム投稿のパーマリンクからカスタムタクソノミーの子孫タームを削除する” の続きを読む »

iOS 13 Safari で文字の拡大/縮小が簡単になったことの影響

9月20日に iPhone 向けソフトウェア iOS 13 の配信が開始されました。その後すぐ25日に iOS 13.1 と、iOS から iPad 向けに独立した iPadOS 13.1 が配信されています。

iOS 13・iPadOS 13(以下まとめて iOS 13 とします)はダークモードをはじめ、数々の新機能が搭載されていますが、その中で、Webブラウザの Safari にWebページの文字を簡単に拡大/縮小できる機能が追加されました。アドレスバー左側の AA をタップすると拡大/縮小などのオプションが表示されます。

iOS 13 Safari のスクリーンショット

ところがこれ、実際は文字だけの拡大/縮小ではなく、ページ全体の拡大/縮小となっていました。つまり macOS の Safari の拡大/縮小と同じ動きです。

macOS の Safari の場合は、[option]キーを併用することで文字だけを拡大/縮小することができるのですが、iOS ではその術が見つかりません。実際、iOS はピンチアウトでズームができるので(viewport の設定によりますが)、iPhone の小さな画面では文字だけが拡大できた方がいいと思うのですが…。

“iOS 13 Safari で文字の拡大/縮小が簡単になったことの影響” の続きを読む »

MW WP Form で空メールが送信される現象とその対策

WordPress のメールフォームプラグイン MW WP Form を利用しているサイトの一つで、下記のように各項目の内容が空のメールが送信される現象がありました。

お問い合わせフォームより送信されました。
------------------------------
お名前      :
メールアドレス  :
お電話番号    :
お問い合わせ内容 :
------------------------------

メールに送信元の情報を記載するようにしているので、そのIPアドレスを調べてみたら、発信元はロシアで、いくつかのスパムレポート(ブラックリスト)に載っていました。

各項目は必須項目となっていますが、そのチェックに引っ掛からずに送信されてます。恐らく、スパムボットによって直接メールフォームプログラムにアクセスして送信されているものと思われますが、その内容が、不正サイトに誘導するわけでもなく、空なのでスパム行為の意図が不明です。

でも、頻繁に空メールが送られてくるのは鬱陶しいので、対策を施してみました。

“MW WP Form で空メールが送信される現象とその対策” の続きを読む »

複眼feed を可変幅のレスポンシブにする

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 を可変幅のレスポンシブにする” の続きを読む »

記事一覧 »

page top