WordPressビジュアルエディターを見てください。コンテンツのフォーマットとスタイル設定にはいくつかの標準オプションがありますが、投稿とページを少し派手に見えるようにするためのカスタマイズに関してはそれほどではありません.
これで、WordPressのテキストエディターとビジュアルエディターの間を行き来して、ボタンやテキストブロックなどを作成するためのCSSを投入できることがわかりますが、これは面倒で、テキストエディターのコード編集に関する多くの経験.
独自のカスタムスタイルを作成し、WordPressエディターのドロップダウンメニューに配置して、必要なときにいつでも使用できるようにした方が簡単ではないでしょうか。はい、はるかに簡単なので、ここでその方法を説明します。このプロセスをできるだけ簡単にすることを目指していますが、カスタムスタイルのすべての利点を知りたい場合は、CSSについて少し知識があると役立ちます。.
WordPressビジュアルエディターにカスタムスタイルを追加する方法を見てみましょう.
コードを追加してWordPressビジュアルエディターにカスタムスタイルを追加する
この最初のオプションでは、CSSを組み込んで変更する方法について少し知っている必要がありますが、この知識を将来使用できるように、基本を学習するのに役立つように少し説明します。これは、プラグインでサイトを圧迫したくない場合に最適なオプションです。.
これのポイントは、WordPressビジュアルエディターのカスタムスタイルを含む新しいドロップダウンメニューを追加することです。これにより、エディターで要素を選択し、それらにカスタムスタイルを適用できます。新しいテーマを開発している場合は、 functions.php ファイルを作成し、以下のコードをそのファイルに配置するか、すでにビルドされているテーマを使用している場合は、このコードを子テーマのfunctions.phpファイルに貼り付けます.
function myprefix_mce_buttons_1（$ buttons）{
array_unshift（$ buttons、 'styleselect'）;
$ buttonsを返します。
}
add_filter（ 'mce_buttons_1'、 'myprefix_mce_buttons_1'）;
WordPressの投稿の1つでエディターに戻ると、エディターの最上行に新しい「フォーマット」ボタンが表示されます。 「mce_buttons_1？これにより、フォーマットメニューボタンがmceエディターの最初の行に配置されます。 「mce_buttons_2」フィルターを使用して2番目の行に配置するか、「mce_buttons_3」を使用して3番目の行に配置することもできます。.
メニュー項目を有効にしたので、投稿内で使用するカスタムスタイルを追加します。以下にリストされたコードを取り、あなたの中に貼り付けてください functions.php 「フォーマット」ドロップダウンに「テーマボタン」と「ハイライト」の2つの新しいスタイルを追加するファイル.
/ **
*カスタムスタイルをmce形式のドロップダウンに追加する
*
* @url https://codex.wordpress.org/TinyMCE_Custom_Styles
*
* /
function myprefix_add_format_styles（$ init_array）{
$ style_formats = array（
//各配列の子は独自の設定を持つフォーマットです-好きなだけ追加してください
アレイ（
'title' => __（ 'Theme Button'、 'text-domain'）、//ドロップダウンのタイトル
'selector' => 'a'、//エディターでターゲットにする要素
'classes' => 'theme-button' // CSSに使用されるクラス名
）,
アレイ（
'title' => __（ 'Highlight'、 'text-domain'）、//ドロップダウンのタイトル
'inline' => 'span'、//選択したコンテンツの周りにスパンをラップします
'classes' => 'text-highlight' // CSSに使用されるクラス名
）,
）;
$ init_array ['style_formats'] = json_encode（$ style_formats）;
$ init_arrayを返します。
}
add_filter（ 'tiny_mce_before_init'、 'myprefix_add_format_styles'）;
タイトルを変更して、ドロップダウンメニューに別の名前を表示したり、配列に項目を追加/削除したりできます。このコードのほぼすべてを変更して、独自のカスタム形式スタイルを表示できます。必ず、 ワードプレスコーデックス 受け入れられるパラメーターと戻り値の詳細な説明.
新しいスタイルが用意できたので、エディターでコンテンツを強調表示して、スタイルを適用できます。 「テーマボタン」のフォーマットにセレクターパラメータがどのように設定されているかに注意してください。つまり、スタイルはその特定のセレクター（この場合は「a」または「link」タグ）にのみ適用できます。追加した2番目の形式「ハイライト」にはセレクターパラメータはありませんが、エディタでハイライトしたテキストにスタイルを適用し、一意のクラス名でスパンにラップするように指示する「インライン」パラメータがあります。ユーザーがエディターの箇条書きにチェックリストの外観を簡単に適用できるように、フォーマットの使用方法に関するTotal WordPressテーマの例を確認できます.
これで、カスタム形式を使用できるようになりましたが、サイトにカスタムCSSを追加してスタイルを設定するまで、それらの形式に違いはありません。テーマ（独自のテーマを作成する場合）または子テーマのスタイルシートを見つけ、次のCSSコードをファイルに貼り付けます。.
.テーマボタン{
表示：インラインブロック;
パディング：10 15px;
色：#fff;
背景：＃1796c6;
text-decoration：なし。
}
.theme-button：hover {
text-decoration：なし。
不透明度：0.8;
}
.テキストハイライト{
背景：＃FFFF00;
}
これで、フロントエンドの新しいフォーマットにスタイルが追加され、適用すると実際に表示されるようになります。わーい！しかし、スタイルが適用されているときに、実際のエディターにスタイルを表示するのも良いことではないでしょうか。これを行うには、WordPressの「エディタースタイルシート」機能を利用する必要があります。独自のテーマを構築している場合は、「editor-style.css」という名前のテーマに新しいcssファイルを作成します（それに応じて、以下のスニペットを編集してください）あなたのフォーマットに追加してから、以下の関数を追加してバックエンドにロードします.
function myprefix_theme_add_editor_styles（）{
add_editor_style（ 'editor-style.css'）;
}
add_action（ 'init'、 'myprefix_theme_add_editor_styles'）;
他の誰かのテーマを使用している場合は、これを子テーマに追加する必要があります。親テーマと競合しないように、または親テーマにすでにCSSファイルが含まれている場合は、一意の名前を付けてください。 WordPressはまず親テーマのエディターCSSファイルを読み込む前に子テーマをチェックし、それが見つかればそれを見つけるので、実際にそれをコピーして子テーマに貼り付け（上記のPHPコードを追加せずに）、新しいCSSを追加するエディター代わりに子テーマからロードします.
素敵なプラグインを使用してWordPressビジュアルエディターにカスタムスタイルを追加する
コードをいじる時間がなかったり、自分で理解したりできない場合は、朗報です。コードをいじる必要なく、上記で実行したことを正確に実行できるプラグインがあります.
単に検索し、インストールしてアクティブ化します TinyMCEカスタムスタイルプラグイン WordPressサイトでアクティブ化します.
に行く 設定> TinyMCE prof.styles WordPressダッシュボードの左側にあります。ここでプラグインの設定を変更します.
プラグインを使用すると、スタイルシートの場所、またはそれらを配置する場所を選択できます。新しいカスタムディレクトリを作成することをお勧めします。 3番目のオプションを選択し、ディレクトリに名前を付けてから、ページを下に移動して 設定を保存する 次のステップに進む前のオプション.
設定を保存したら、下にスクロールして[新しいスタイルを追加]ボタンを選択します.
ここで、カスタムスタイルの外観をカスタマイズします。基本的には、CSSコードを生成するシンプルなWebベースのエディターです。ドロップダウンメニューに表示するもののタイトルを入力します。セレクター、インライン、またはブロックタイプのいずれかを選択します。上のスクリーンショットを使用して、CSSクラスとスタイルを入力するか、ドロップダウンメニューを使用する予定に応じて独自に作成してください。完了したら、ページの下部にある[設定を保存]をクリックします.
次に、新しいカスタムスタイルがエディターでどのように表示されるかを確認します。新しい投稿またはページを開き、ビジュアルエディターの左側にある[形式]ドロップダウンメニューを見つけます。 2行目に表示されます。ドロップダウンメニューをクリックすると、作成した新しいスタイルが表示されます.
ビッグブルーボタンオプションまたは作成したものをクリックして、エディターに表示されることを確認します。それを使用するには、フォーマットしたいテキストをハイライトし、オプションをクリックしてください。!
結論
それは今のところすべてです！新しいスタイリングの使用方法については、 WordPress codexページ このトピックに専念.
WordPressビジュアルエディターにカスタムスタイルを追加する方法について質問がある場合は、コメントセクションでお知らせください。そして、あなたのサイトを少し見栄えよくするために作成した変わったスタイルを自由に共有してください!
07.06.2020
WordPressビジュアルエディターにカスタムスタイルを追加する方法
Jeffrey Wilson チュートリアル
WordPressビジュアルエディターを見てください。コンテンツのフォーマットとスタイル設定にはいくつかの標準オプションがありますが、投稿とページを少し派手に見えるようにするためのカスタマイズに関してはそれほどではありません.
これで、WordPressのテキストエディターとビジュアルエディターの間を行き来して、ボタンやテキストブロックなどを作成するためのCSSを投入できることがわかりますが、これは面倒で、テキストエディターのコード編集に関する多くの経験.
独自のカスタムスタイルを作成し、WordPressエディターのドロップダウンメニューに配置して、必要なときにいつでも使用できるようにした方が簡単ではないでしょうか。はい、はるかに簡単なので、ここでその方法を説明します。このプロセスをできるだけ簡単にすることを目指していますが、カスタムスタイルのすべての利点を知りたい場合は、CSSについて少し知識があると役立ちます。.
WordPressビジュアルエディターにカスタムスタイルを追加する方法を見てみましょう.
Contents
コードを追加してWordPressビジュアルエディターにカスタムスタイルを追加する
この最初のオプションでは、CSSを組み込んで変更する方法について少し知っている必要がありますが、この知識を将来使用できるように、基本を学習するのに役立つように少し説明します。これは、プラグインでサイトを圧迫したくない場合に最適なオプションです。.
これのポイントは、WordPressビジュアルエディターのカスタムスタイルを含む新しいドロップダウンメニューを追加することです。これにより、エディターで要素を選択し、それらにカスタムスタイルを適用できます。新しいテーマを開発している場合は、 functions.php ファイルを作成し、以下のコードをそのファイルに配置するか、すでにビルドされているテーマを使用している場合は、このコードを子テーマのfunctions.phpファイルに貼り付けます.
WordPressの投稿の1つでエディターに戻ると、エディターの最上行に新しい「フォーマット」ボタンが表示されます。 「mce_buttons_1？これにより、フォーマットメニューボタンがmceエディターの最初の行に配置されます。 「mce_buttons_2」フィルターを使用して2番目の行に配置するか、「mce_buttons_3」を使用して3番目の行に配置することもできます。.
メニュー項目を有効にしたので、投稿内で使用するカスタムスタイルを追加します。以下にリストされたコードを取り、あなたの中に貼り付けてください functions.php 「フォーマット」ドロップダウンに「テーマボタン」と「ハイライト」の2つの新しいスタイルを追加するファイル.
タイトルを変更して、ドロップダウンメニューに別の名前を表示したり、配列に項目を追加/削除したりできます。このコードのほぼすべてを変更して、独自のカスタム形式スタイルを表示できます。必ず、 ワードプレスコーデックス 受け入れられるパラメーターと戻り値の詳細な説明.
新しいスタイルが用意できたので、エディターでコンテンツを強調表示して、スタイルを適用できます。 「テーマボタン」のフォーマットにセレクターパラメータがどのように設定されているかに注意してください。つまり、スタイルはその特定のセレクター（この場合は「a」または「link」タグ）にのみ適用できます。追加した2番目の形式「ハイライト」にはセレクターパラメータはありませんが、エディタでハイライトしたテキストにスタイルを適用し、一意のクラス名でスパンにラップするように指示する「インライン」パラメータがあります。ユーザーがエディターの箇条書きにチェックリストの外観を簡単に適用できるように、フォーマットの使用方法に関するTotal WordPressテーマの例を確認できます.
これで、カスタム形式を使用できるようになりましたが、サイトにカスタムCSSを追加してスタイルを設定するまで、それらの形式に違いはありません。テーマ（独自のテーマを作成する場合）または子テーマのスタイルシートを見つけ、次のCSSコードをファイルに貼り付けます。.
これで、フロントエンドの新しいフォーマットにスタイルが追加され、適用すると実際に表示されるようになります。わーい！しかし、スタイルが適用されているときに、実際のエディターにスタイルを表示するのも良いことではないでしょうか。これを行うには、WordPressの「エディタースタイルシート」機能を利用する必要があります。独自のテーマを構築している場合は、「editor-style.css」という名前のテーマに新しいcssファイルを作成します（それに応じて、以下のスニペットを編集してください）あなたのフォーマットに追加してから、以下の関数を追加してバックエンドにロードします.
他の誰かのテーマを使用している場合は、これを子テーマに追加する必要があります。親テーマと競合しないように、または親テーマにすでにCSSファイルが含まれている場合は、一意の名前を付けてください。 WordPressはまず親テーマのエディターCSSファイルを読み込む前に子テーマをチェックし、それが見つかればそれを見つけるので、実際にそれをコピーして子テーマに貼り付け（上記のPHPコードを追加せずに）、新しいCSSを追加するエディター代わりに子テーマからロードします.
素敵なプラグインを使用してWordPressビジュアルエディターにカスタムスタイルを追加する
コードをいじる時間がなかったり、自分で理解したりできない場合は、朗報です。コードをいじる必要なく、上記で実行したことを正確に実行できるプラグインがあります.
単に検索し、インストールしてアクティブ化します TinyMCEカスタムスタイルプラグイン WordPressサイトでアクティブ化します.
に行く 設定> TinyMCE prof.styles WordPressダッシュボードの左側にあります。ここでプラグインの設定を変更します.
プラグインを使用すると、スタイルシートの場所、またはそれらを配置する場所を選択できます。新しいカスタムディレクトリを作成することをお勧めします。 3番目のオプションを選択し、ディレクトリに名前を付けてから、ページを下に移動して 設定を保存する 次のステップに進む前のオプション.
設定を保存したら、下にスクロールして[新しいスタイルを追加]ボタンを選択します.
ここで、カスタムスタイルの外観をカスタマイズします。基本的には、CSSコードを生成するシンプルなWebベースのエディターです。ドロップダウンメニューに表示するもののタイトルを入力します。セレクター、インライン、またはブロックタイプのいずれかを選択します。上のスクリーンショットを使用して、CSSクラスとスタイルを入力するか、ドロップダウンメニューを使用する予定に応じて独自に作成してください。完了したら、ページの下部にある[設定を保存]をクリックします.
次に、新しいカスタムスタイルがエディターでどのように表示されるかを確認します。新しい投稿またはページを開き、ビジュアルエディターの左側にある[形式]ドロップダウンメニューを見つけます。 2行目に表示されます。ドロップダウンメニューをクリックすると、作成した新しいスタイルが表示されます.
ビッグブルーボタンオプションまたは作成したものをクリックして、エディターに表示されることを確認します。それを使用するには、フォーマットしたいテキストをハイライトし、オプションをクリックしてください。!
結論
それは今のところすべてです！新しいスタイリングの使用方法については、 WordPress codexページ このトピックに専念.
WordPressビジュアルエディターにカスタムスタイルを追加する方法について質問がある場合は、コメントセクションでお知らせください。そして、あなたのサイトを少し見栄えよくするために作成した変わったスタイルを自由に共有してください!