WordPressビジュアルエディタにカスタムスタイルを追加しますか？ カスタムスタイルを追加すると、テキストエディタを使用せずにフォーマットをすばやく適用できます。 この記事では、WordPressビジュアルエディタにカスタムスタイルを追加する方法を紹介します。
レマルク： このチュートリアルでは、CSSの基本的な知識が必要です。
時 必要になります WordPress Visual Editorにカスタムスタイルを追加する必要がありますか？
デフォルトでは、WordPress のビジュアルエディターは基本的な書式設定とスタイルのオプションを提供します。 ただし、場合によっては、CSS ボタンを追加したり、 コンテンツ、フックなど。
ビジュアルエディタからテキストエディタにいつでも切り替えて、カスタムHTMLおよびCSSコードを追加できます。 ただし、定期的にいくつかのスタイルを使用する場合は、それらを簡単に再利用できるように、ビジュアルエディタに追加することをお勧めします。
これにより、時間を大幅に節約できるだけでなく、いつでもどこでも同じスタイルを使用できます。 サイトのWeb.
さらに重要なことは、サイトの記事を編集しなくてもスタイルを簡単に編集または更新できることです。
これをWordPressで行う方法を発見します。
1メソッド：プラグインでカスタムスタイルを追加する
最初に行う必要があるのは、プラグインをインストールしてアクティブにすることです TinyMCEのカスタムスタイル "。 詳細については、インストール方法に関するステップバイステップガイドを参照してください。 WordPressのプラグイン.
アクティベーション後、「 設定>設定»TinyMCEカスタムスタイル プラグイン設定を構成します。
プラグインを使用すると、スタイルシート ファイルの場所を選択できます。 テーマまたは子テーマのスタイルを使用するか、カスタムの場所を選択できます。
その後、ボタンをクリックする必要があります すべての設定を保存する 設定を保存します。
これで、カスタムスタイルを追加できます。 スタイルセクションまでスクロールしてボタンをクリックする必要があります 新しいスタイルを追加します。 '。
最初にスタイルのタイトルを入力する必要があります。 このタイトルはドロップダウンメニューに表示されます。 次に、を定義する必要があります。 それが行、ブロック、または選択要素であるかどうか。
その後、CSSクラスを追加してから、以下のスクリーンショットに示すようにCSSルールを追加します。
CSSスタイルを追加したら、[すべての設定を保存]ボタンをクリックして変更を保存します。
これで、既存の記事を編集したり、新しい記事を作成したりできます。 WordPressビジュアルエディターの2行目のドロップダウンメニューにフォーマットが表示されます。
エディターでテキストを選択し、ドロップダウンメニューからカスタムスタイルを選択して適用するだけです。
記事をプレビューして、カスタムスタイルが正しく適用されるかどうかを確認できるようになりました。
2メソッド：スタイルをビジュアルエディターに手動で追加
この方法では、WordPress ファイルに手動でコードを追加する必要があります。 これが初めての場合は、追加方法に関するチュートリアルをご覧ください。 WordPressのプラグイン.
ステップ1：WordPress Visual Editorのドロップダウンメニューからカスタムスタイルを追加します。
まず、WordPressビジュアルエディタにドロップダウンメニューを追加します。 このドロップダウンメニューを使用すると、カスタムスタイルを選択して適用できます。
あなたは、あなたのfunctions.phpファイルまたはプラグインに次のコードを追加する必要があります。
関数wpb_mce_buttons_2（$ボタン）{array_unshift（$ボタン、 'styleselect'）; $ボタンを返す; } add_filter（ 'mce_buttons_2'、 'wpb_mce_buttons_2'）;
ステップ2：ドロップダウンメニューにオプションを追加する方法
次に、作成したドロップダウンメニューにいくつかのオプションを追加する必要があります。 その後、ドロップダウンメニューの形式からこれらのオプションを選択して適用できるようになります。
このチュートリアルでは、XNUMX つのカスタム スタイルを追加して作成します。 コンテンツ ブロックとボタン。
次のコードをfunctions.phpまたは特定のプラグインの「functions.php」ファイルに追加する必要があります。
/ * * MCE設定をフィルタリングするためのコールバック関数* / function my_mce_before_init_insert_formats（$ init_array）{// style_formats配列を定義します$ style_formats = array（/ * *各配列の子は独自の設定を持つ形式です*各配列にはタイトルがあることに注意してください、ブロック、クラス、およびラッパー引数*タイトルは[フォーマット]メニューに表示されるラベルです*ブロックはそれがスパン、div、セレクター、またはインラインスタイルのいずれであるかを定義します*クラスはCSSクラスを定義できます*ラッパーは選択した要素の周囲に新しいブロックレベルの要素を追加します* / array（ 'title' => 'Content Block'、 'block' => 'span'、 'classes' => 'content-block'、 'wrapper' => true、）、array（ 'title' => 'Blue Button'、 'block' => 'span'、 'classes' => 'blue-button'、 'wrapper' => true、）、array（ 'title' => '赤いボタン'、 'ブロック' => 'スパン'、 'クラス' => '赤いボタン'、 'ラッパー' => true、）、）; //配列JSONENCODEDを 'style_formats'に挿入します$ init_array ['style_formats'] = json_encode（$ style_formats）; $ init_arrayを返します。 } // 'tiny_mce_before_init'にコールバックをアタッチしますadd_filter（ 'tiny_mce_before_init'、 'my_mce_before_init_insert_formats'）;
これで、WordPressに新しい投稿を追加し、ビジュアルエディターのドロップダウンメニューからフォーマットをクリックできます。 カスタムスタイルが表示されていることがわかります。
ただし、それらを選択しても、WordPressのビジュアルエディターでは違いはありません。
3ステップ：CSSスタイルを追加する
最後のステップは、カスタムスタイルのCSSスタイルルールを追加することです。
このCSSを、テーマまたは子テーマのstyle.cssファイルに追加する必要があります。
.content-block {border：1px solid #eee; パディング：3px; 背景：#ccc; 最大幅：250px; float：右; text-align：中央; } .content-block：{clear：both;の後 } .blue-button {background-color：＃33bdef; -moz-border-radius：6px; -webkit-border-radius：6px; border-radius：6px; ボーダー：1pxソリッド＃057fd0; 表示：インラインブロック; カーソル：ポイント; 色：#ffffff; パディング：6px 24px; text-decoration：なし。 } .red-button {background-color：＃bc3315; -moz-border-radius：6px; -webkit-border-radius：6px; border-radius：6px; ボーダー：1pxソリッド＃942911; 表示：インラインブロック; カーソル：ポイント; 色：#ffffff; パディング：6px 24px; text-decoration：なし。 }
エディターのスタイルシートは、 コンテンツ ビジュアルエディターで。 このファイルの場所を見つける方法については、ドキュメントを参照してください。
テーマにスタイルシートファイルがない場合は、いつでも作成できます。 新しいCSSファイルを作成し、「 カスタム・エディタ-style.cssに '。
このファイルをテーマのルートディレクトリにアップロードしてから、このコードをテーマの「functions.php」ファイルに追加する必要があります。
my_theme_add_editor_styles機能（）{add_editor_style（ 'カスタムエディタ-のstyle.css'）; } Add_action（ 'INIT'、 'my_theme_add_editor_styles'）。
それで全部です。 WordPressビジュアルエディタでカスタムスタイルを追加しました。 これで、正しいと思うカスタマイズを行うことができます。
お気に入りのソーシャルネットワーク上でこのチュートリアルを友人と自由に共有してください。
