2018.07.26スポンサーリンクこの記事では、Simplicity2の後継Wordpress無料テーマである『Cocoon』に実装されている拡張スタイル+ビジュアルエディタ拡張を他のWordpressテーマでも使えるようにカスタマイズする方法を説明します。Cocoonのビジュアルエディタ拡張は、メニューが階層化されているのでとても使いやすいと思います。結論から申しますと、結構簡単に『Cocoon』と同じ拡張スタイルを他のWordpressテーマのビジュアルエディタに導入することができました。拡張スタイルと言ってるのは、CSSで装飾された囲みやボタンやアンダーラインのことです。それらをエディタから呼び出せるようにするのがビジュアルエディタの拡張になります。定型文やショートコードを登録し、エディタから呼び出す方法はいくつかあります。私が調べた感じでは大きく2通りで、AddQuickTagは難あり(後述)なので、今回はCocoonで採用されているTinyMCEの拡張で対応します。AddQuicktagプラグインを使うWordPressビジュアルエディタ(TinyMCE)を拡張するAddQuicktagプラグインを使いたくない理由よく見かけるのが、AddQuicktagというプラグインを使う方法です。エディター・ビジュアルエディターへのクイックタグの追加を容易にします。ja.wordpress.orgクイックタグの登録が面倒くさい私も最初は使用していました、しかし登録するのがGUI経由でチマチマひとつづつやらないといけないので登録数が増えてくると、嫌になってきます。1個登録するたびに、たくさんチェックボックスをONにしないといけないのです。一括登録のために、インポートできるjson形式のファイルを作成すれば一気に登録も可能でしょうが、そのためだけに環境を作るのも時間が惜しい。クイックタグの選択メニューの階層化ができない登録が一括でできたとしても、定型文やショートコードの登録項目が増えてくると、AddQuicktagはプルダウンリストが一つしかないので、メニューを階層化しないと使いにくくなります。その方法もないのか見つけられません。あと、不具合らしき動きも放置されたままなのも気持ち悪い感じがしました。タグを大量に登録する場合は登録方法、使い勝手ともに難ありそんなこんなで、AddQuicktagを絶賛している人は多いのですが、登録する段階でかなり心が折れるプラグインなので、今回は使っていません。10個以下ぐらいのショートコードや定型文であればAddQuickTagは導入、登録も簡単ですし、使い勝手も悪くないです。WordPressビジュアルエディタ(TinyMCE)の『スタイル』を拡張するCocoonはWordpressのビジュアルエディタを拡張してあります。Cocoonと同じ方法を使うことで資産を利用させてもらおうということです。CocoonSEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。wp-cocoon.com完全にCocoonをコピーするのは大変ですし、だったらCocoon使えばよいって話なので、今回はビジュアルエディタの『スタイル』をCocoonと同じような見た目に拡張するところまでにします。ビジュアルエディタの『スタイル』のカスタマイズのコードスタイル拡張についてスタイル拡張に自分で作ったアンダーラインのCSSを登録することはできませんでしょうか?wp-cocoon.com↑のサイトで紹介されているコードを参考に進めていきます。紹介されているコードが最新のCocoonと比べて少し古いので、最新版を参考にした以下のコードをfunction.phpにコピペすれば、ビジュアルエディタの『スタイル』は拡張されるようになります。今回のように500行程度もあるソースファイルをfunction.phpに組み込むと、function.phpの管理が面倒になります。function.phpの肥大化を避ける方法は以下記事が参考になりました。参考:https://8beat-studio.net/sort-out-wp-functions/function.phpを分割してincludeする方法が便利で、簡単です。詳細は参考サイトをご覧いただくとして、一番簡単なのは、function.phpのある部分を外部ファイルに分けて、以下の記述をfunction.phpに書いて呼び出すことです。);こうすることで、function.phpがかなりすっきりします。今回のような長いfunction.phpの記述を追加するとWebサイトが表示されるまで時間がかかるようになるかもしれません。今回function.phpに追加した記述は、管理画面でしか使いませんから、そのような場合のみ読み込むようにすれば、スピードが遅くなりません。ビジュアルスタイルのファイルCocoon内部で呼び出しているビジュアルスタイルの定義ファイルは、lib/admin-tinymce-qtag.phpというファイルになります。githubに最新版が公開されているので、Cocoonをインストールしなくても中身を確認することができますし、このファイルを呼び出すだけでTinyMCEにスタイルが追加されます。yhira/cocoon100%GPLの無料Wordpressテーマです。GitHub.github.com拡張スタイル用のCSSを追加する追加した拡張スタイルは、ビジュアルエディタから呼び出すことができるようになりますが、肝心のスタイル定義がなければclassの追加しかしてないので、見た目は変わりません。それぞれのCSSがどのようになっているかはCocoonのサイトで拡張スタイルの説明ページがあります。それぞれのページで見本が置いてありますので、Chromeなどの検証ツールで使われているCSSを確認して抜き出せばよいと思います。記事装飾用の拡張スタイル本文などを装飾するための拡張スタイルの紹介です。Cocoonでは基本的に、ビジュアルエディターの「スタイル」「タグ」ドロップダウンボックスからクリック操作で利用することが可能です。必要な拡張スタイル定義を自分のstyle.cssに追加する方法を取りました。まとめこの記事には、CSS部分が無いのでかなり手抜きな記事(コピペですべて適用可能ではない)なのですが、CSS部分はわかるんだけどビジュアルエディタの拡張方法(特に階層付きメニュー)がわからなかったという人にとっては、簡単に導入できる内容ではないかと思います。最新情報をお届けします。この記事を書いた人ブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。国内シェアNo1の安定性と実績が魅力。SSDで死角なしの万能サーバー。JavaScript2020.01.162020.01.23ブーンオランダで生きていく関連記事サイト運営レンタルサーバーの独自ドメインメールをGmailで送受信する方法レンタルサーバーを契約すると独自ドメインのメールアドレスが使えるようになります。ほとんどの人はGmailを使っていますので、独自ドメインのメールアドレスをGmailで送受信できないの?と思う人は多いです。cacheを使っているのにFacebookのシェア数が全て0になる問題の解決方法が書かれています。無料のWooCommerceテーマで本当に使えるおススメはどれ?最近BASEでオンラインショップを作っている人をよく見かけます。この記事は、外部ショッピングカートを使うと手数料が・・という人はWordpressのショッピングカートプラグインと専用テーマを使うと捗るよ、という内容の記事です。待望のロリポップのSSD搭載ハイスピードプランを試した結果は?⇒微妙だったロリポップのハイスピードプランがリリースされました。SSD搭載のレンタルサーバープランがリリースされたということで、皆さんワクワクドキドキしてますよね。先日、HTMLサイトのディレクトリの移動でリダイレクトをする機会がありました。その時にちょっとハマったのでメモとして残しておきます。スマホやPCのfaviconを一気に作れる便利なサイトWordpressを使っているとfaviconの設定で悩むことは無くなりました。Wordpressにはテーマにfaviconを設定する箇所があるので指定のサイズで設定して終わりになります。シンタックスハイライター有効化とソースの表示行数の指定【Prim.jsカスタマイズ】ホームサイト運営スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。目次TOPへ情報スポンサーリンクブーンはるばる日本よりオランダ王国へやってまいりました。自分の経験が少しでも参考になれば嬉しいです。お問い合わせは、『こちら』からお願い致します。ビジュアルスタイルのファイル拡張スタイル用のCSSを追加するまとめタイトルとURLをコピーしました。