このページの本文へ

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

有限会社Willさんいん

“WordPress” カテゴリの記事(52件)

WordPress のブログカードを無効にした時の Gutenberg の挙動

この記事は2020年5月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress では oEmbed 機能により、URL を入力するだけで簡単に YouTube 動画や Twitter の投稿などを埋め込むことができますが、Version 4.4 以降からは WordPress の投稿を下記のような「ブログカード」というスタイルで、内部リンクや oEmbed がサポートされた外部のサイトにも埋め込むこともできるようになっています。

しかし、ブログならともかく、WordPress を企業や団体の Web サイトとして運用している場合、単に URL を記述したいとか、そもそもブログカードとして提供したくないということがあります。

“WordPress のブログカードを無効にした時の Gutenberg の挙動” の続きを読む »

投稿一覧からログイン中の投稿者以外の投稿を隠すとカスタムフィールドが表示されないことの対策

この記事は2020年4月2日に書かれたものです。情報が古い可能性がありますのでご注意ください。

投稿者権限のユーザーがログインしている時、投稿一覧を表示すると自身の投稿以外の投稿も見えます。編集はもちろんできず、タイトルが表示されているだけですが、下書きの投稿も見えてしまうので見えないようしたいと思い、次のようなコードを functions.php に書きました。

function show_only_authorpost($query) {
  global $current_user;
  if( is_admin() && !current_user_can('edit_others_posts') ){
    $query->set('author', $current_user->ID);
  }
}
add_action('pre_get_posts', 'show_only_authorpost');

これで投稿者は自身の投稿しか表示されなくなりますが、しかし、投稿画面を見ると Advanced Custom Fields (ACF) プラグインで作成したカスタムフィールドが消えていました。

散々悩んだ末、ACF で作成するカスタムフィールドも acf-field-group という一つの投稿タイプであり、管理者が作成しているので、自身の投稿ではないからこれも見えなくなっているのだと気づきました。

そこで、管理画面用のグローバル変数 $pagenow を使い、表示しているページのファイル名(投稿一覧画面は edit.php)による判別を追記しました。

function show_only_authorpost($query) {
  global $current_user;
  global $pagenow;
  if( is_admin() && !current_user_can('edit_others_posts') && $pagenow === 'edit.php' ){
    $query->set('author', $current_user->ID);
  }
}
add_action('pre_get_posts', 'show_only_authorpost');

これで ACF のカスタムフィールドが表示されます。

TinyMCE Advanced のテーブルで勝手に設定される width 対策(妥協策)

この記事は2020年3月30日に書かれたものです。情報が古い可能性がありますのでご注意ください。

TinyMCE Advanced プラグインを利用すると、WordPress のビジュアルエディタでテーブルを挿入することができるのですが、このテーブルの挙動には以前から悩まされています。それは、テーブルと全てのセルに勝手に width や height を設定してしまうという仕様です。

以前の TinyMCE Advanced 5.1.0 までは、テーブルを挿入した時は問題ないのですが、テーブルの罫線をドラッグした際に width や height が追加されます。これは後述の方法で対策していました。

そして TinyMCE Advanced が 5.2.0 にアップッデートされた時、改善されるかと思いきや、ますます厄介なことに、テーブルを挿入した時に有無を言わさず width が設定されるようになっていました。5.3.0 になってもそれは変わらないのですが、その仕様を受け入れつつ、対策することにしました。

“TinyMCE Advanced のテーブルで勝手に設定される width 対策(妥協策)” の続きを読む »

WorePressループでサブクエリ WP_Query を入れ子で使う

この記事は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 を入れ子で使う” の続きを読む »

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

この記事は2019年11月11日に書かれたものです。情報が古い可能性がありますのでご注意ください。

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

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

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

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

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

この記事は2019年10月14日に書かれたものです。情報が古い可能性がありますのでご注意ください。

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

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

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

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

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

この記事は2019年9月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。

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

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

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

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

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

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

Contact Form 7 で星形の5段階評価を作成

この記事は2019年6月22日に書かれたものです。情報が古い可能性がありますのでご注意ください。

WordPress のメールフォームプラグインといえば、Contact Form 7MW WP Form が有名ですが、それぞれに特徴があり、案件によって使い分けています。

簡単にフォームを作成できて、追加のプラグイン等による機能拡張が多いのが Contact Form 7、細かい設定ができて、出力される HTML をコントロールしやすいのが MW WP Form かなと感じています。

このたび、既に Contact Form 7 を使っているサイトで、新たなフォームの作成案件があり、その中に星形の5段階評価を付ける項目がありました。星形のインターフェイスは必須ではなかったのですが、要望ですし、フォームに(Contact Form 7 でというわけではなく)星形の5段階評価を作成する方法は、検索するといくつか紹介されていますので、できないことはないだろうと、実装してみました。

星形の5段階評価のイメージ
“Contact Form 7 で星形の5段階評価を作成” の続きを読む »

マルチサイト内でサイトを複製する

この記事は2019年6月17日に書かれたものです。情報が古い可能性がありますのでご注意ください。

マルチサイト環境で新たなサイトを作成する場合、サイトや各種プラグインの設定、カスタムフィールド など、サイト毎に一から設定しなければなりません。

そのため、例えばマルチサイトで多言語サイトを構築していて、同じ構成で新たな言語を追加したい場合など、既に存在しているサイトと同等のサイトを新たに作ろうとするとき、上記に加えて沢山の固定ページや問い合わせフォームも作成しようとすると、かなり工数がかかります。固定ページなどは既存サイトからエクスポートしてそれを新しいサイトにインポートすることもできますが、WordPress の機能ではカスタムフィールドの内容はエクスポートされません。

そこで、既存のサイトを複製して新たなサイトを作り、それを元に必要な箇所を修正することができればと情報を探してみましたが、求めるものが見つからなかったので、既存サイトのデータベースを流用して実行してみました。

“マルチサイト内でサイトを複製する” の続きを読む »

Instagram Feed の無料版で写真のキャプションを表示

この記事は2019年6月15日に書かれたものです。情報が古い可能性がありますのでご注意ください。

Instagram のフィードをWebサイトに埋め込みむ場合、手軽に埋め込むことができるサービスとして InstaWidget がありますが、無料サービスゆえにサムネイルのリンク先が InstaWidget のサイトで開き、尚且つ広告が表示されるのが難点です。Google Analytics による広告なので、特に企業サイトなどでは競合他社の広告が表示されることも…。

そこで他にいいサービスが無いかと探してみたところ、WordPress のサイトであれば Instagram Feed という有名なプラグインがあったのですね。灯台下暗しでした。

この Instagram Feed、無料版と Instagram Feed Pro という有料版があり、有料版ではハッシュタグが使えたり、フィードの見た目もいろいろカスタマイズできますが、無料版は機能が限られています。それでも、複数のアカウントを統合して時系列順に表示できますし、何よりサムネイルのリンク先が Instagram のサイトで開き、広告表示が無いのが助かります。

この無料版で、サムネイルにマウスオーバーした際に写真のキャプションを表示することができないかと思い、探ってみました。

“Instagram Feed の無料版で写真のキャプションを表示” の続きを読む »

1 2 3 4 5 6