高度なカスタムレイアウトを備えた WordPress コンテンツ エディター テンプレート

WordPress のエディター TinyMCE は非常に強力なツールです。Web デザイナーにとって、WordPress のエディター TinyMCE の使用は難しくありませんが、HTML をあまり知らない人にとっては、それほど使いやすくはありません。コンテンツ エディターを「見た通りのもの」にし、コンテンツ エディターのレイアウトを事前に作成しておけば、ユーザーは対応する領域に直接コンテンツを入力するだけで済みます。上記の問題は簡単に解決でき、コンテンツ編集の効率も向上します。

今日は、WordPress の高度なカスタム レイアウト コンテンツ エディター テンプレートの制作スキルを紹介します。 見たままのコンテンツを実現するには、コンテンツ エディターでプリセット コンテンツとレイアウトをカスタマイズし、それをスタイル シートと組み合わせてこの機能を簡単に実現する必要があります。

カスタムレイアウトの作成

組版レイアウトは、HTML の組版レイアウトと CSS のスタイルシート インターフェースの 2 つの部分に分かれています。

HTMLレイアウト

<?php add_filter( 'default_content', 'custom_editor_content' ); function custom_editor_content( $content ) { $content = ' <div class="content-col-main"> これはメインコンテンツ領域です<p style="color:#999;">Juewei フロントエンド http://www.jiawin.com</p> </div> <div class="content-col-side"> これはサイドバーコンテンツ領域です<p style="color:#999;">Juewei フロントエンド http://www.jiawin.com</p> </div> '; return $content; } ?>

WordPress の default_content フィルターは、新しく作成された記事またはページにのみ適用でき、以前に公開された記事またはページには適用されません。したがって、公開された記事に影響が出ることを心配する必要はありません。

CSS スタイル

次に、この構造レイアウトのスタイルシートを紹介します。

<?php add_editor_style( 'editor-style.css' ); ?>

editor-style.css という名前の別のスタイルシート ファイルを作成する必要があります。その中のサンプル コードは次のとおりです。

body { background: #f5f5f5; } .content-col-main { float:left; width:66%; padding:1%; border: 1px dotted #ccc; background: #fff; } .content-col-side { float:right; width:29%; padding:1%; border: 1px dotted #ccc; background: #fff; } img { /* 画像が列内に収まるようにします */ max-width: 100%; width: auto; height: auto; }

ここで注意が必要なのは、スタイルシートファイルのパスです。この例では、テーマディレクトリの下、つまり style.css と同じフォルダに配置されます。

次に、バックエンドに切り替えて、「新しい記事 (またはページ) の作成」をクリックします。コンテンツ エディター領域に、作成した HTML 構造が自動的に追加されます。

これはシンプルなレイアウトです。default_content とstyles.css のコンテンツとレイアウト構造を、Web サイトに合わせて編集できます。以下に、私自身の Web サイト (Juewei フロントエンド) に基づいた例を示します。

ここから、コンテンツ エディターにいくつかのシンプルなレイアウト構造を自動的に追加するだけで済み、将来のコンテンツ編集に非常に便利になります。

さまざまな記事タイプに合わせてレイアウトテンプレートをカスタマイズする

上記のコードは、高度なカスタム レイアウト コンテンツ エディター テンプレートを作成するための最も基本的なアイデアですが、まだいくつかの制限があります。たとえば、投稿記事と固定ページに異なる HTML コードを自動的に追加する必要があります。ソリューションを拡張するにはどうすればよいでしょうか。実際には、custom_editor_content() 関数に if 条件文を追加できます。WordPress の if 条件文は間違いなく非常に実用的な文であり、それをうまく使用する方法を知っておく必要があります。次のコードを見てみましょう。

post_type == 'page') { $content = ' // ページテンプレートを定義します'; } elseif ( $current_screen->post_type == 'POSTTYPE') { $content = ' // 投稿記事テンプレートを定義します'; } else { $content = ' // ページと投稿以外のテンプレートを定義します'; } return $content; } ?>

上記のコードは、異なる記事タイプのコンテンツ エディターで異なる HTML コードを自動的に追加することを実現します。この時点で、異なる記事タイプのコンテンツ エディターで異なるスタイル ファイル テーブルを使用することもできると思うかもしれません。さまざまなスタイル シートをカスタマイズして、多様でパーソナライズされたレイアウト テンプレートを作成します。はい、上記のアイデアに従って、異なる記事タイプのコンテンツ エディターを定義して、異なるスタイル ファイル テーブルを参照することもできます。

post_type) { case 'post': add_editor_style('editor-style-post.css'); break; case 'page': add_editor_style('editor-style-page.css'); break; case '[POSTTYPE]': add_editor_style('editor-style-[POSTTYPE].css'); break; } } add_action( 'admin_head', 'custom_editor_style' ); ?>

上記のコードを functions.php ファイルに追加するだけです。ここでの「editor-style-[POSTTYPE].css」は、記事の種類に基づいて対応するスタイルシート ファイルを自動的に作成します。たとえば、アナウンスメント「bulletin」の場合は、「editor-style-bulletin.css」が自動的に導入されます。

記事タイプを自動的に取得して、対応する記事タイプ スタイル シートを出力するといえば、次のコード呼び出しメソッドを使用して、ログ、ページ、お知らせ、ビデオ、アルバムなど、対応する記事タイプを自動的に取得することもできます。すべてはバックグラウンドに任され、自動的に判断されます。個人的には、上記の if 文を使用して参照の対応する記事タイプを決定する方法と比較して、この実装方法の方が柔軟性が高く、効率的で、コードがシンプルであると感じています。もちろん、どの実装方法を選択する場合でも、独自のテンプレートに応じて選択でき、最も適したものが最適です。

post_type.'.css' ) ); } add_action( 'admin_head', 'custom_editor_style' ); ?>

WordPress コンテンツ エディターをどのように使用するかはあなた次第です。ここで紹介したのはあくまでアイデアであり、革新的な実践は各自の責任です。皆様の議論を歓迎します...

出典: Juewei フロントエンド

www.jiawin.com/wordpress-layout-editor/

元のタイトル: 高度なカスタムレイアウトを備えた WordPress コンテンツ エディター テンプレート

キーワード: WordPress、エディター、ウェブマスター、ウェブサイト、ウェブサイトのプロモーション、収益化