固定ページ・投稿ページの編集は手の込んだカスタマイズをしようとすると、通常はどうしてもHTMLの知識が必要になってしまいます。
HTMLの記述はWordPressで初めてWEBサイトを作るような人にはなかなかハードルが高いでしょう。
そこで今回はページの編集が格段にやりやすくなるプラグインである「TinyMCE Advanced」を紹介します。
個人的には完全に必須プラグインになっているものですので、一度試してみてはいかがでしょうか。
初期設定方法
まずはインストールから初期設定方法を紹介します。
インストール方法
プラグインの新規追加のページの検索枠に「TinyMCE Advanced」と入力します。
TinyMCE Advancedが表示されますので、「今すぐインストール」をクリックします。
インストールされると「有効化」のボタンに変わりますので、クリックします。
Block Editor(Gutenberg)の初期設定方法
インストール済みのプラグインのページのTinyMCE Advancedの「設定項目」クリックします。
設定項目をクリックすると以下のページが開きます。
Gutenbergのみを利用する場合は左側の「Block Editor」を選んでください。
もし旧エディターである「Classic Editor」を利用する場合ば右を選んでください。
※「Classic Editor」を利用するには「Classic Editorプラグイン」が必要となります。
Block Editor(Gutenberg)の設定方法
Block Editor(Gutenberg)タブには主に以下の設定項目があります。
- Main toolbar
記事執筆時に段落ブロック内で使用するツールバーの設定をします。 - Alternative side toolbar
画面右側のサイドツールバーの設定をします。 - Unused buttons for the blocks toolbar
使用しない機能をここに置きます。
設定はドラッグ&ドロップで直感的に配置することができます。
アンダーラインとマークを移動してみます。
以下のようになります。
次にカラー関係の設定をすることができますが、特に邪魔になるものでもないので両方Yesで問題ないでしょう。
さらに下にクラシックブロックの設定がありますが、こちらは後述するクラシックエディターの設定とほぼ同じです。
ドラック&ドロップで設定できますので、「グーテンベルグ内で以前のクラシックエディターのように使いたい」という人は必ず設定しておきましょう。
Classic Editorの初期設定方法
「Classic Editorプラグイン」使用時のクラシックエディターの設定方法です。
「使用しないボタン」の一覧から上部の領域にドラッグ&ドロップすることでビジュアルエディタに機能を追加することができます。
もちろんいらない機能は削ることが可能です。
「設定」タブの各種機能
設定のタブでは各種設定を行えます。
特にこだわりがなければデフォルトのままで良いでしょう。
- Append all buttons to the top toolbar in the Classic Paragraph and Classic blocks.
GutenbergのすべてのクラッシックブロックにおいてTinyMCE Advancedプラグインで設定したツールバーを一番上に表示させます。
- リストスタイルオプション
箇条書きリストや番号付きリストを作るときに、先頭に点や数字が挿入されます。 - コンテキストメニュー
編集画面で右クリックを押すとリンクやテーブルを挿入できるようになりますが、機能が少ないので特に必要ないかと感じます。 - 代替リンクダイアログ
リンク設定のボタンでTinyMCE Advancedのリンク設定画面が開きます。ページ内リンクが設定できますので、目次の作成時に便利です。
リンクを設定したあとならWordPressのリンク設定画面を開けます。 - フォントサイズ
pxでのフォントサイズを設定できるようになります。ただし基本的には%で指定した方が汎用性が高いのでおすすめです。
↓高度なオプションでは「段落タグの保持」にチェックを入れておくことで、クラシックエディター利用時のビジュアルエディターとテキストエディターの切り替え時に起こる自動補完を防げます。切り替えることがあるという人は必須ですね。
設定が完了したら「変更を保存」をクリックして終了します。
使い方
Block Editor(Gutenberg)での使い方
適用するテキストをドラッグし、タブから機能を選択します。
先ほど追加した機能の中で、ここではアンダーラインを選んでいます。
以下のようにアンダーラインが入ります。
Classic Editorでの使い方
WordPressのデフォルトの状態だと以下のようなビジュアルエディターです。
「TinyMCE Advanced」を有効化することで機能が豊富になっていることがわかりますね。
「TinyMCE Advanced」を使ってテキストサイズを大きくしてみます。
機能を使う場合、先にテキストを入力しておいた方が使いやすいです。
適用するテキストをドラッグします。
ptの選択をクリックし、指定するサイズを選択します。
大きいサイズになります。
次はテキストのカラーを変えてみます。
テキストを選択し、カラータブの矢印をクリックします。
青を選択したら青色に変化しましたね。
青くしたテキストは上掛けのように文字を太くすることもできます。
さらにドラックして太字ボタンをクリックします。
青い太字に変化しました。
以上が「TinyMCE Advanced」の使い方です。
当サイトのテーマ「AFFINGER5」だと機能満載になってます
当サイトで導入している「
WING（AFFINGER5）
」だと、TinyMCE Advancedを導入することで非常に多くの機能を簡単に使用することができます。
ものすごく機能が多いので、専門知識はないけどWEBサイトでいろんな機能を使いたいという人にはドンピシャなテーマです。
赤枠内がAFFINGER5独自の機能になります。
アドセンスコードを挿入したり、リンクカード・ボタン・ランキングを挿入するのも簡単にできるんですね。
簡単に作れてしまいます。
さらにスマホに表示しない領域や、クリックで開くボックスを挿入することも簡単にできるようになってしまいます。
まるもじです
戦略的なWEBサイトの運営に興味のある方は是非AFFINGER5を導入するのも検討してみてはいかがでしょうか。
>>WING（AFFINGER5）の詳細ページを見る
テーマによって「TinyMCE Advanced」を使って機能を増やしているものもありますので、使いやすいようにカスタマイズしてコンテンツに集中できる環境を構築しましょう。
WordPressのおすすめプラグインについてまとめていますので、参考にしてみてください。
戦略的テーマ「AFFINGER5」
当サイトのWordPressのテーマAFFINGER5です。
SEOや自由度含め、これほどの完成度のテーマは他にはありません。
発売から値上がりし続けてますが、早めに1つ買っておけば何サイトでも適用できるのでおすすめです。
戦略的テーマ「AFFINGER5」
