エディターVSコンポーザー!?シンプルなWYSIWYGテキストエディタ vs. ドラッグ&ドロップ式プラグイン

ビジュアルコンポーザー」は、Wordpressのトレンドの一つです。コンテンツ管理システムのWordpressでページや記事を作成しようとする人は、統合されたWPエディタに依存しています。WP-Editorは、WYSIWYGエディタ、つまり「見たままが得られる」エディタです。つまり、マイクロソフトの有名なオフィスソフト「Word」と同じように、常に変化をライブで見ることができるのです。Make a word bold is bold.単語に下線を引くと、その単語に下線が引かれます。これはまさにWordpressのエディタの仕組みで、あなたがしたことはあなたが見たことです。小規模なオンラインプロジェクトやウェブサイト、ブログなどでは、この機能で全く問題ありません。しかし、Wordpressが普及するにつれ、大規模なサイトがシステムを導入するようになりました。しかし、ウェブデザイナーやメディアマネージャーの多くは、単純なテキストフィールドに満足せず、ページの個々のレイアウトを装飾したいと考えていました。個々のアイコンや背景、スライダー、大きな画像などを通して。

です。

クラシックなWordpressエディターかコンポーザーか?

プロにとっては全く問題なく、HTMLとCSSを使って数行のコードを書けば完成します。しかし、コンテンツマネジメントシステムの原則は、大量のデータを管理し、理想的には、ユーザーが簡単にアクセスし、編集し、削除できるようにすることです。そのため、技術的な知識がなくても簡単に操作できる、ユーザーフレンドリーなインターフェースを持つことが望まれます。

原則、ショートコードを使ったデザイン

比較的シンプルな方法でページのスタイルを整えるために、ショートコードを使うことが考えられました。これらのショートコードは、複雑なコードをシンプルなタグにまとめ、ユーザーが使用できるようにしたものです。簡単な例では、派手なヘッドラインをショートコードで包むことができます。

[ headline ]Here is the headline[ /headline ].

… その要素は、特別な色、特別な位置、おそらく異なるフォント、フォントの強さなど、さまざまなものを得ることができます。複雑なHTMLやCSSのプロパティを入力し始める前に、ヘッドラインという言葉を使っておくのが賢明でしょう。これがショートコードの原理で、複雑で長いコードをシンプルな小さなスニペットにまとめます。この原則の問題点は、ユーザーはきれいに整形された見出しではなくコードを見ているため、視覚的な想像力が必要になることです。ここで、少し複雑にして、まったく同じ間隔でテーブルを入れたとしましょう。そのテーブルも、背景に個別に、青、黄、オレンジと色をつけていきます。これは、少なくとも技術者でない人にとっては、ショートコードが限界に達するところです。

です。

新機能:Wordpressのエディターで作曲する

コンテンツを非常に簡単に配置することができ、また、おおよその位置、おおよその形で直接視覚的に見ることができるように、以前から標準的なWPエディタの代わりに、Composerという様々な選択肢がありました。これらは普通にダウンロードして、WordPressのシステムにインストールすれば、すぐに使えます。重要なダウンロードはすべてここにあり、また記事の最後にも掲載されています。

最初のステップでは、お好みのコンポーザーを通常のプラグインのようにWordPressのダッシュボードにインストールします。次のステップでは、通常通りプラグインを有効化します。今、何が変わったのか?ページとポスト。まず、Wordpressのダッシュボードをもう一度見てみましょう。ここには、ブログ記事からメディア、コメントや拡張機能まで、重要なポイントが一目でわかります。今日の課題に関連するのは、ページとポストです。原理的には、ページと投稿の違いは、従来のブログのように投稿を分類し、時間を設定することだけです。ページとは、利用規約やお問い合わせページ、「会社概要」などの静的なページのほか、スタートページなどのことです。

ウェブサイトにとって最も重要なWPダッシュボードの要素です。

wordpress-dashboard-grundelemente-erklaerung

WP Composerを起動する

以下の例では、Wordpressテーマ「Enfold」のレイアウトエディタを使用しています(こちらからご覧いただけます)。WP Bakeryのレイアウトエディターとビジュアルコンポーザーのどちらを使用しているかに関わらず、各ページや投稿にコンポーザーへの誘導やWPエディターからコンポーザーへのモード切り替えを行う青いボタンが表示されます。

wordpress-dashboard-theme-editorauswahl-03

多くの利点、多くの柔軟性

まず、Composerがもたらす無数のメリットを見てみましょう。まず、パソコンやモバイル端末向けにコンテンツを編集するレスポンシブ化です。コンポーザーでは、列や行を個々の要素として表示し、デスクトップ、タブレット、スマートフォンなどの画面サイズに合わせて表示することができます。さらに、視覚的なインターフェースを備えているので、HTMLやCSS、ショートコードを必要とせず、動画の背景のような強力な要素を作ることができます。ページや記事内のすべての要素は、ドラッグ&ドロップで簡単かつ直感的に移動できます。個々の要素の構造は定義されており、常に同じです。これにより、ウェブサイトの外観が統一され、ユーザーの方向性が定まるため、訪問時の混乱が少なくなります。

その他の利点

  • HTMLやCSSの知識がなくても、要素を自由に配置することができます。
  • メディアや画像などを簡単に組み込むことができる
  • テンプレートとしてレイアウトを作成できる

wordpress-dashboard-theme-editor-drag-n-drop-01

です。

コラム、セル、構造

それでは、画像4を見てみましょう。そこには、Wordpressでビジュアルエディターを使うための小さな紹介の結論が書かれています。これは、私のワークショップの最後のステップでもあります。なぜなら、作曲家との共同作業は非常に直感的で、試行錯誤しながら学ぶことができるからです。要素はたいてい20個までなので、時間もかかりません。独立したトレーニングを行うことで、コンポーザーを使うことがより簡単に、より早く理解できるようになります。少しの指導と想像力があれば、アプリケーションは本当に簡単なので、すぐに良い結果が得られます。

wordpress-dashboard-editor-composer-elemente-aufbau-01

私のアドバイス:シンプルに

写真4の構造を見てください。多くの場合、特別な見出しは必要なく、テキストフィールドで十分です。セクションやカラムを設定して、ここにテキストエレメントを配置し、何が起こるかを見てみましょう。プレビュー(編集画面の右上)を使えば、新しいブラウザタブで結果を確認することができます。さらに少し進んで、最初のテキストフィールドに線を引きます。テキストフィールドから見出しを作り、新しいテキストフィールドを一番最後に配置します。できました。コンポーザーでこれらのフィールドをコピーするだけで、3つまたは4つまたは5つのパラグラフを直接作成することができます。このようにして、素早くレイアウトを作成することができ、また、新入社員を素早く教育し、効果的なコンテンツ管理の仕組みを見せることができます。

コンテンツマネジメント、コンテンツマーケティング、Wordpress、従業員教育のためのワークショップなどについてご質問があれば、ぜひお電話ください。 私たちは、お客様やクライアントとの密接な協力関係の中で何度もテストしてきた、効率的で強力なワークショップのコンセプトを持っています。また、私たちのオンライン起業家やコンサルタントとしての経験やノウハウを活用することもできます。

ただし、ここで注意していただきたいのは、Composerを使うのは一部のページだけにして、読み込み速度を不必要に長くしないように、集中的に使うことです。

です。