ポータルサイト制作にも役立つ、WordPressの技術者寄りTips

プログラミングに馴染みのない人でも、それなりのことができるのが WordPress の良いところですが、少し高度なことをする際に便利なTipsとプラグインをご紹介。

プラグイン

HTML Editor Syntax Highlighter

投稿のテキストエディタをCodeMirrorベースのJSエディタにしてくれるプラグインです。
Gutenbergにも対応し、ハイライトのカラーリングはもちろん、Tabによるインデントや行番号の有無なども設定できます。
個人的にはEmmetに対応してくれると助かるのですが、issue #76によると要望があれば対応してくれるそうな感じです。
しかし、「ビジュアルエディタ」に切り替えると、インデントが全て消えてしまうので注意が必要です。
この挙動は実験したり調べたりしましたが解決できませんでした。

Loco Translate

プラグインページ:
https://ja.wordpress.org/plugins/loco-translate/

gettext用の翻訳ファイルを管理画面から管理・生成してくれるプラグインです。
テーマディレクトリをスキャンしてpotテンプレートを作る機能もあり、テーマに限らずプラグインやWordPress本体の翻訳ファイルも扱えます。
また、WordPressに「Translator」権限が追加され、翻訳管理する人の権限も割り当て可能です。 多言語サイトには必須です。

Admin Menu Editor

管理画面のメニューをカスタマイズできるプラグインです。
例えば、デフォルトの「投稿」というメニューを「新着情報」などに変えたかったり、「メディア」メニューをもっと下に持ってきたかったりする場合があります。
アクションフック等を使うのも良いですが、プラグインの方が手間がないと思います。

Safe SVG

プラグインページ:
https://ja.wordpress.org/plugins/safe-svg/

レスポンシブやRetinaディスプレイなどを考慮すると、SVGファイルのグラフィックは積極的に使っていきたいです。
SVGにはコードが埋め込めるのでWordPressではデフォルトで非サポートなのですが、このプラグインではアップロードできる権限などが設定できます。
また、SVGファイルのアップロード有効化だけでは「メディア」にサムネイル表示できないのですが、このプラグインを使用すると表示してくれます。

WP Bootstrap Navwalker

GitHub:
https://github.com/wp-bootstrap/wp-bootstrap-navwalker

こちらはプラグインではないのですが、wp_nav_menu関数のwalkerオプションを使ってBootstrapのNavbarコンポーネントに対応するためのライブラリです。
自作すると面倒なので助かります。

ACF(Advanced Custom Fields)のTips

WordPressサイトならほぼAdvanced Custom Fieldsは必ず使うと思いますが、繰り返しフィールドを使うため、ためなるべくPro版を使います。
そんなACFのTipsです。

設定の同期

ACFのフィールドはテスト環境・本番環境などで統一する必要があります。
もしテーマをGit管理などしていれば、設定の同期機能を使いましょう。
やり方は簡単で、テーマフォルダの直下に `acf-json` という(書き込み可能な)ディレクトリを作ると、自動的に設定用のJSONファイルが吐き出されます。
あとはそのファイルをGit等でアップし、差分がある場合はACFの管理画面に「同期」というメニューが表示されます。

JSONファイルはひとつのフィールドグループで1ファイルとして保存されます。

参考:https://www.advancedcustomfields.com/resources/synchronized-json/

WYSIWYGフィールドのボタン設定

WYSIWYGフィールドのTinyMCEのツールバーは Full と Basic の2種類が選べますが、それぞれ以下のフィルタで変更できます。
(以下のコードがデフォルトです)

<?php
add_filter('acf/fields/wysiwyg/toolbars', function ($toolbars) {
  // Fullツールバー
  $toolbars['Full'] = [
    1 => [
      'formatselect', 'bold', 'italic',
      'blockquote', 'bullist', 'numlist',
      'alignleft', 'aligncenter', 'alignright',
      'link', 'unlink', 'undo', 'redo',
      'spellchecker', 'separator', 'shortcoder',
    ],
    2 => [
      'fontselect', 'fontsizeselect',
      'outdent', 'indent', 'pastetext', 'removeformat',
      'charmap', 'wp_more', 'forecolor', 'table', 'wp_help',
    ],
  ];

  // Basicツールバー
  $toolbars['Basic'] = [
    1 => [
      'bold', 'italic', 'underline', 'blockquote', 'strikethrough',
      'bullist', 'numlist', 'alignleft', 'aligncenter', 'alignright',
      'undo', 'redo', 'link', 'fullscreen',
    ],
  ];

  return $toolbars;
});

GoogleマップのAPIキー設定

Googleマップフィールドで、APIキーが必須になってからは自分のキーを設定する必要があります。
以下のようにフィルタで設定します。

<?php
add_filter('acf/fields/google_map/api', function ($api) {
  $api['key'] = 'ここにAPIキー';
  return $api;
});

もしGoogle APIを使いたくない場合は Leaflet 番のプラグインもあります。
https://wordpress.org/plugins/search/acf-leaflet-field/
個人的には Leaflet + Open Street Map をデフォルトにしてほしい気もします。

そのほかのTips

Gutembergの無効化

Gutemberg非常に強力なエディタなのですが、あまりにもクセが強く拡張も大変なので、無効化する場合は以下をfunctions.phpに記述します。

<?php
add_filter('use_block_editor_for_post', '__return_false');

投稿のビジュアルエディタにCSS適用

ビジュアルエディタで表示ページと同じような見た目にするため必要です。
SassなどでBootstrapをimportしておけばのグリッドなども見やすくなります。

<?php
add_editor_style('エディタ用.css');

// Gutembergで使う場合
add_action('enqueue_block_editor_assets', function () {
  wp_enqueue_style('theme-editor-style', get_template_directory().'/エディタ用.css');
});

jQueryの軽量化

デフォルトでは管理画面と表示側のjQueryは同じものが使われます。
表示側でアニメーションやAjax系の処理を使わない場合は、より軽いスリム版のjQueryに置き換えても良いかもしれません。

<?php
// いったんjQuery関連のスクリプトを削除
wp_deregister_script('jquery');

// スリム版を再登録
wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js');

// wp_foot に追加する場合
//wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-3.3.1.slim.min.js', [], false, true);

以上です。
03-6709-9819平日 9:30~18:00
arrow_upward