日本語
日本語
WordPress Gutenberg Blockは、WordPressバージョン5.0から紹介されたエディター機能で、コンテンツをモジュールで効率的に編集するようにします。開発者にとって、Gutenbergブロックは使いやすいだけでなく、カスタムスタイルとスクリプトを介したブロックの外観と相互作用効果の調整もサポートしています。この記事では、Webサイトのプロフェッショナリズムとユーザーエクスペリエンスを強化するために、Gutenbergブロック用のパーソナライズされたスタイルを作成する方法を段階的に紹介します。
開始する前に、WordPress 5.0以上を使用していることを確認し、基本的なCSSとJavaScriptの知識を持っていることを確認してください。これにより、カスタムスタイルをよりよく理解して適用するのに役立ちます。
カスタムスタイルのキーは、テーマのfunctions.phpファイルを変更し、新しいCSSファイルをエディターにロードすることです。 functions.phpを開き、ファイルの最後に次のコードを追加します。
function my_custom_block_style() {
wp_enqueue_style(
'my-custom-block-style', // スタイル名
get_stylesheet_directory_uri() . '/css/my-block-style.css', // スタイルファイルパス
array( 'wp-blocks' ),
filemtime( get_stylesheet_directory() . '/css/my-block-style.css' ) // キャッシュを自動的に更新します
);
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_style' );その中で、「マイカスタムブロックスタイル」はスタイルのロゴ名で、必要に応じて変更できます。スタイルファイルは、テーマディレクトリの下のCSSフォルダーに配置されていることを前提としており、ファイル名はMy-Block-Style.cssです。 Fileemtime関数は、キャッシュの問題を回避するためにスタイルファイルが更新されるたびに、ブラウザが最新バージョンを自動的にロードすることを保証します。
次に、テーマのCSSフォルダーに「My-Block-Style.css」を作成し、すべてのカスタムスタイルがファイルに書き込まれます。
スタイルファイルの準備ができたら、WordPressエディターを開き、カスタマイズするブロックを追加または選択します。ブロック設定でカスタムスタイルの追加機能を追加し、対応するブロックのCSSセレクターを入力します。
たとえば、段落ブロックのテキスト色を変更するには、次のことを書くことができます。
.wp-block-paragraph {
color: red;
}「.wp-block-paragraph」は、パラグラフブロックのデフォルトのCSSクラス名です。複数のブロックをスタイリングするには、セレクターボックスに複数のセレクターを同時に入力すると、スタイルが対応するすべてのブロックに適用されます。
スタイル入力を完了したら、[スタイルの追加]ボタンをクリックして保存します。エディターを更新すると、選択したブロックには、ウェブサイトの外観にカスタムスタイルが適用されていることがわかります。
WordPress Gutenbergブロックのカスタマイズは、特定のブロックのテーマファイルにカスタムCSSを導入し、スタイリングを導入することにより、柔軟で強力になります。上記のスキルを習得することで、ユニークなコンテンツモジュールを簡単に作成して、Webサイトのプロフェッショナリズムとユーザーエクスペリエンスを向上させることができます。この記事がグーテンバーグブロックのスタイルを設計するのに役立つことを願っています。
