ウェブサイト検索

Wordpress ビジュアル エディターにカスタム スタイルを追加する方法

WordPress ビジュアルエディターを見てください。コンテンツの書式設定やスタイルを設定するための標準オプションはいくつかありますが、投稿やページを少し派手に見せるためのカスタマイズに関してはあまりありません。

さて、WordPress のテキスト エディターとビジュアル エディターの間を行ったり来たりして、ボタンやテキスト ブロックなどを作成するための CSS を追加できる機能があることはご存知かもしれませんが、これは面倒です。コード編集の経験が豊富なため、テキスト エディターは少し怖く感じます。

独自のカスタム スタイルを作成し、WordPress エディターのドロップダウン メニューに配置して、必要なときにいつでも使用できるようにできたら、もっと簡単だと思いませんか?はい、その方がずっと簡単なので、ここでその方法を説明したいと思います。このプロセスをできるだけ単純にするように努めていますが、カスタム スタイルの利点を最大限に活用するには、CSS の知識が少しあると役立つことに注意してください。

WordPress ビジュアルエディターにカスタムスタイルを追加する方法を見てみましょう。

コードを追加して WordPress ビジュアルエディターにカスタムスタイルを追加する

この最初のオプションでは、CSS を組み込んで変更する方法について少し知っている必要がありますが、将来この知識を活用できるように、基本を学ぶのに役立つ手順を少し説明します。これは、プラグインによってサイトの負担を軽減したくない場合に最適なオプションです。

このポイントは、WordPress ビジュアル エディターにカスタム スタイルを含む新しいプルダウン メニューを追加することです。これにより、エディターで要素を選択し、それらにカスタム スタイルを適用できるようになります。新しいテーマを開発している場合は、functions.php ファイルを見つけてそのファイルに以下のコードを配置します。すでに構築されているテーマを使用している場合は、このコードを子テーマの function.php ファイルに貼り付けます。 。

function myprefix_mce_buttons_1( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}

add_filter( 'mce_buttons_1', 'myprefix_mce_buttons_1' );

WordPress 投稿のいずれかのエディタに戻ると、エディタの一番上の行に新しい「フォーマット」ボタンが表示されるはずです。 「mce_buttons_1?」にどのようにフックしたかに注目してください。これにより、フォーマット メニュー ボタンが mce エディターの最初の行に配置されます。 「mce_buttons_2」フィルターを使用して 2 行目に配置したり、「mce_buttons_3」フィルターを使用して 3 行目に配置したりすることもできます。

メニュー項目を有効にしたので、投稿内で使用するカスタム スタイルを追加します。以下にリストされているコードをfunctions.php ファイルに貼り付けます。これにより、[形式] ドロップダウンに 2 つの新しいスタイル（「テーマ ボタン」と「ハイライト」）が追加されます。

/**
 * Add custom styles to the mce formats dropdown
 *
 * @url https://codex.wordpress.org/TinyMCE_Custom_Styles
 *
 */
function myprefix_add_format_styles( $init_array ) {
	$style_formats = array(
		// Each array child is a format with it's own settings - add as many as you want
		array(
			'title'    => __( 'Theme Button', 'text-domain' ), // Title for dropdown
			'selector' => 'a', // Element to target in editor
			'classes'  => 'theme-button' // Class name used for CSS
		),
		array(
			'title'    => __( 'Highlight', 'text-domain' ), // Title for dropdown
			'inline'   => 'span', // Wrap a span around the selected content
			'classes'  => 'text-highlight' // Class name used for CSS
		),
	);
	$init_array['style_formats'] = json_encode( $style_formats );
	return $init_array;
} 
add_filter( 'tiny_mce_before_init', 'myprefix_add_format_styles' );

タイトルを変更してドロップダウン メニューに別の名前を表示したり、配列から項目を追加/削除したりすることができます。このコード内のほとんどすべてを変更して、独自のカスタム形式スタイルを表示できます。必ず WordPress Codex を確認してください。受け入れられるパラメータと戻り値の詳細な説明。

新しいスタイルを作成したので、エディターでコンテンツを強調表示してスタイルを適用できます。 「テーマ ボタン」形式にセレクター パラメーターがあることに注目してください。これは、スタイルがその特定のセレクター (この場合は「a」または「link」タグ) にのみ適用できることを意味します。追加した 2 番目の形式「ハイライト」にはセレクター パラメーターはありませんが、エディターでハイライト表示したテキストにスタイルを適用し、一意のクラス名でスパンで囲むように指示する「インライン」パラメーターがあります。 Total WordPress テーマの例では、ユーザーがエディター内の箇条書きにチェックリストの外観を簡単に適用できるようにフォーマットを使用した方法を示しています。

これでカスタム フォーマットを使用できるようになりましたが、サイトにカスタム CSS を追加してスタイルを設定するまでは、見た目は変わりません。テーマ (独自に作成する場合) または子テーマのスタイルシートを見つけて、次の CSS コードをファイルに貼り付ける必要があります。

.theme-button {
	display: inline-block;
	padding: 10 15px;
	color: #fff;
	background: #1796c6;
	text-decoration: none;
}
.theme-button:hover {
	text-decoration: none;
	opacity: 0.8;
}
.text-highlight {
	background: #FFFF00;
}

これで、フロントエンドの新しい形式にスタイルが追加され、適用されるとライブで確認できるようになります。わーい！しかし、スタイルが適用されているときに、実際のエディターでもスタイルを確認できたら便利だと思いませんか?これを行うには、WordPress の「エディター スタイルシート」機能を利用する必要があります。独自のテーマを構築している場合は、カスタム CSS を使用してテーマ内に「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 ファイルがある場合は、一意の名前を付けるようにしてください。エディターでは、実際にコピーして子テーマに貼り付け（上記の PHP コードを追加せずに）、新しい CSS を追加できます。これは、WordPress は親テーマのエディター CSS ファイルを読み込む前にまず子テーマをチェックし、見つかった場合は子テーマをチェックするためです。代わりに子テーマからロードしてください。

素敵なプラグインを使用して WordPress ビジュアルエディターにカスタムスタイルを追加する

コードをいじる時間がない場合、または自分でコードを理解することができない場合に朗報です。コードをいじらずに、上で行ったことを正確に完了できるプラグインがあります。

TinyMCE Custom Styles プラグインを検索、インストール、有効化して、WordPress サイトで有効化するだけです。

WordPress ダッシュボードの左側にある [設定] > [TinyMCE prof.styles] に移動します。ここでプラグインの設定を変更します。

このプラグインを使用すると、スタイルシートの配置場所、またはスタイルシートを配置する場所を選択できます。新しいカスタム ディレクトリを作成することをお勧めします。 3 番目のオプションを選択してディレクトリに名前を付け、ページを下に移動して [設定を保存] オプションをクリックしてから、次のステップに進みます。

設定を保存したら、下にスクロールして [新しいスタイルを追加] ボタンを選択します。

ここで、カスタム スタイルの外観をカスタマイズします。これは基本的に、CSS コードを生成する単純な Web ベースのエディターです。ドロップダウン メニューに表示したいタイトルを入力します。セレクター、インライン、ブロックのいずれのタイプが必要かを選択します。上のスクリーンショットを自由に使用して CSS クラスとスタイルを入力したり、プルダウン メニューの使用予定に応じて独自のクラスやスタイルを作成したりできます。完了したら、ページの下部にある「設定を保存」をクリックします。

次に、新しいカスタム スタイルがエディターでどのように表示されるかを確認します。新しい投稿またはページを開き、ビジュアル エディターの左側にある [形式] ドロップダウン メニューを見つけます。それは2行目に現れます。ドロップダウン メニューをクリックすると、作成した新しいスタイルが表示されます。

Big Blue Button オプション、または作成したものをクリックして、エディターに表示されることを確認します。これを使用するには、書式設定したいテキストを強調表示し、オプションをクリックするだけです。

結論

それは今のところすべてです！新しいスタイルの使用方法について詳しくは、このトピック専用の WordPress コーデックス ページをチェックしてください。

WordPress ビジュアルエディターにカスタムスタイルを追加する方法について質問がある場合は、コメントセクションでお知らせください。サイトの見栄えを少し良くするために作成した珍しいスタイルを自由に共有してください。