このページの本文へ

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

有限会社Willさんいん

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

WordPress のカスタマイザーによるサイトアイコンをブログカードだけに使用する

WordPress では、Version 4.3 以降からテーマカスタマイザーを使って管理画面から簡単にサイトアイコンを設定することができます。アイコン画像を一枚用意するだけで、とても簡単に各種のサイトアイコンを設定できるのですが、一つのアイコン画像から favicon(ファビコン)と Web クリップアイコン(apple-touch-icon)、Windows 用アイコンが生成され、これらが公開画面と管理画面、さらにブログカードのサイトアイコンにも適用されるので、アイコンのデザインによっては意図しない残念な結果になることがあります。

例えば、当社ロゴのような丸いアイコンの場合、ブラウザのタブなどに表示される favicon は背景を透過にして円のサイズを大きくしたいのですが、これをWeb クリップアイコンにも使用すると、黒い背景に丸いアイコンが上下左右の余白がない状態で表示されます。

サイトアイコンのスクリーンショット
左から、サイトアイコンから生成された、favicon(ブラウザのタブ)、Windows用アイコン(スタートにピン留め)、Webクリップアイコン(iOS)と、本来表示したいWebクリップアイコン

だからと言って、テーマカスタマイザーを使わず、普通に head 内にコードを書いて各種サイトアイコンを指定すると、ブログカードに表示されるサイトアイコンが WordPress のロゴになってしまいます。

そこで、テーマカスタマイザーによるサイトアイコンをブログカードだけに使用し、favicon や Web クリップアイコンは個別に用意したものを、一般的な方法で設定する方法を考えてみました。

“WordPress のカスタマイザーによるサイトアイコンをブログカードだけに使用する” の続きを読む »

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

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

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

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

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

投稿者権限のユーザーがログインしている時、投稿一覧を表示すると自身の投稿以外の投稿も見えます。編集はもちろんできず、タイトルが表示されているだけですが、下書きの投稿も見えてしまうので見えないようしたいと思い、次のようなコードを 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 対策(妥協策)

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 を入れ子で使う

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

記事一覧 »

page top