WordPressの作成者には、ビジュアルエディターまたはテキストエディタでページや投稿を作成するオプションがあります。 ビジュアルエディタは、そのツールバーオプションと簡単な編集環境で合理的に良い仕事をしていますが、テキストエディタの使用は、コンテンツを整理す
なぜ（ビジュアルエディタの代わりに）テキストエディタを使いたいのかだけでなく、どれだけ簡単に使うことができるのかを説明しましょう。
なぜテキストエディタを好むかもしれませんか？
- あなたの内容はあなたの読者および調査エンジンのためのより多くの意味を成している。
- テキストエディタを非常に便利にするためには、いくつかのHTMLタグを知る必要があります。
- CSSスタイルプロパティをHTMLコードに直接適用できます。
ビジュアルエディタを使用するとどうなりますか？
ビジュアルエディタにコピー、メディア、リンクを追加すると、実際にページや投稿にHTMLが追加されます。 それはすべてボンネットの下で行われます。
私が何を意味するのか分かりませんか？ これを試してみてください。
ビジュアルエディタにコピーを追加します。 次に、[テキスト]タブを選択します。 あなたが見ているのはHTMLです。 ビジュアルエディタと同様に、テキストエディタでHTMLコードを直接編集できます。
実際には、ビジュアルエディタでできるよりもテキストエディタで多くのことを行うことができます。 これにより、テキストモードでの作業はより生産的ではなく、より満足のいくものになります。 あなたはより正確にあなたの読者に利益をもたらし、あなたのSEOの努力を後押しするあなたのコンテンツをマークアップすることができるでしょう。
HTMLは、それが取得するのと同じくらい簡単です。 WordPressによって生成されたものを含むすべてのwebページは、それを使用します。
HTMLを学ぶことは、WordPressでそれを使用することをはるかに超えた利点を持っています！
HTMLとは何ですか？
ウェブの共通言語として知られているHyperText Markup Language(HTML)は、著者がコンテンツに意味を割り当てることを可能にするシステムです。 HTML要素（タグとしてよく知られている）を使用すると、コンテンツを段落、見出し、リスト、リンク、およびその他の構造として定義できます。
HTMLは文法によく似ています。
それはウェブページの見た目やスタイルとは関係ありません。 レイアウト、タイポグラフィ、色などのwebページデザインの問題は、WEBデザインスタイルの言語であるCSS（カスケードスタイルシート）で取り上げられています。
HTMLはWorld Wide Web Consortium(W3C)によって開発されています。 最新バージョンはHTML5です。
あなたが使用する可能性が最も高いタグ
HTMLはコンテナ化されたマークアップシステムです。 開いているすべてのタグには、一致する終了タグがあります。
たとえば、ページまたはページのセクションで最も重要なコンテンツには、次のような見出し1タグを使用します。Htmlについてのすべて</h1>
オープンタグは<h1>であり、コンテナは</h1>
同様に、段落がどのようにマークアップされるかは次のとおりです:
<p>数年前、クライアントと良い友人は、私がWordPressを学ぶことを提案しました。 当時、私はCMSの任意のタイプに反対していました。 少し私は私がそれを愛し、ニューヨーク市の教室のそしてウェビナーによって多くの人々に教えることを来ることを知っていた。</p>
あなたがする必要があるのは、あなたが行くように、またはあなたがコピーに入力した後のいずれかのタグを追加し、テキストエディタでコンテン
ここでは、HTMLを書くときに使用する最も一般的なタグの説明です。 それらは、見出し、リスト、リンク、グループ化、およびいくつかのその他のタグです。
見出しタグ
| タグ | それは何をしますか |
<h1></h1> |
最も重要なコピーを指定するために、ページの上部またはページの一部で使用されます。 |
<h2></h2> |
ページまたはページの一部で2番目に重要なコピーを指定するために、h1の後に使用されます。 |
<h3></h3> |
ページまたはページの一部で3番目に重要なコピーを指定するためにh2の後に使用されます。 |
- 実際にはほとんど使用されていないh4、h5、およびh6見出しタグもあります。
- フォントサイズを変更する目的で見出しタグを使用しないでください。
リストタグ
HTMLで3種類のリストを作成できます。 最も人気のある2つは、順序付けられたリストと順序付けられていないリストです。
項目の順序が重要でない場合は、順序付けされていないリストが使用されます。
<>
<李>花</李>
<李>野菜</李>
<李>木</李>
</ul>
- 花
- 野菜
- 木
順序付きリストは、項目の順序が関連する場合に使用されます。
<>
<李>カリフォルニア</李>
<李>テキサス</李>
<李>フロリダ</李>
</ol>
- カリフォルニア
- テキサス
- フロリダ
(この例では、順序は関連性があり、米国の州で最大の母集団によって決定されます。)
注:リストを入れ子にして、リスト項目の階層を作成することもできます。 これは、ビジュアルエディタを使用するときに行うのは困難です。
リンクタグ
テキストや画像をリンクに変換するには、アンカー（リンク）タグの内側にテキストや画像をラップします。 リンクを作成するための構文は常に同じですが（<a href=”url”>link text</a>）、それを行うには2つの非常に一般的な方法があります。
WordPressページへのリンクには、以下を使用します:
<A href=”http://domain.com/this-is-the-page-title”>linkWordPressページへ</A>
WordPressページだけでなく、任意のページまたはリソースへのリンクには、次のように使用します:
<a href=”http://domain.com/about.html”>linkHTMLページへ</a>
注：実際には3番目の方法があります。 WordPressが次の構文でリンクを作成する特別な方法を使用できます:
<a href=”インデックス。php？page_id=356″>あなたのサイトのページへのリンク</a
この場合、あなたはあなたのサイトにリンクしているページのページまたは投稿idを知る必要があります。 （各ページまたは投稿には一意のid番号があります）。
グループ化タグ
技術的には、”グループ化タグ”のようなものはありませんが、他の要素を含むHTMLタグのセットを記述する最良の方法です。 これらのタグの目的は、コンテンツの意味をより正確に記述することです。
たとえば、<ヘッダー>タグを使用して、ページの先頭情報を含む部分を次のように定義できます:
<ヘッダ>
<h1>先頭の見出し行</h1>
<img src=”画像ファイルのurl”>
<p>論理的に情報のグループとして一緒に保持する見出しと画像の後の情報の段落。</>
</ヘッダー>
ここにいくつかの非常に一般的なグループ化タグがあります
| タグ | それは何をしますか |
<main> |
ページで一度だけ使用されるこのタグは、ページの最も重要な情報をグループ化します。 |
<section> |
sectionタグは、コンテンツをセクションに分割するために複数回使用できます。 |
<article> |
最も一般的には、ブログの記事や記事としてコンテンツを定義するために使用されます。 |
<aside> |
main、section、article、またはその他のグループ化タグを補足するコンテンツを定義するために使用します。 |
<header> |
ページまたはページの一部の先頭情報であるコンテンツを定義するために使用されます。 |
<footer> |
著者、連絡先情報、著作権、”トップに戻る”リンクなど、通常セクションまたはページを終了するコンテンツを含むために使用されます。 |
<nav> |
ナビゲーションインターフェイスを定義するために使用されます。 一般的には、<ul><li><a>タグをラップ（含む）します。 |
<div> |
コンテンツをより正確に記述するために特定のタグが存在しない場合に使用されます。 |
その他のタグ
タグのほかに、これらのタグはテキストエディタで作業するときに非常に役立ちます。
| タグ | それは何をしますか |
<img src="url of image file"> |
ページに画像を埋め込みます。 |
<br> |
テキストの行を次の行に分割します。 キーボードのソフトリターンに似ています。 |
<!-- hidden code or info here --> |
これは、Webページに表示したくないコードやテキストエディタで作成したメモを非表示にするために使用されるコメントタグです。 |
<blockquote> or <q> |
コピー内の引用には、これらのタグのいずれかを使用します。 |
| 著作権や商標などの英数字以外のすべての記号の文字エンティティ | 。 詳細なリスト。 |
これらのタグはあなたに長い道のりを得るでしょうが、ここにあなたを助けるためのいくつかのリソースがあります。
●必要なのは10個のHTMLタグ（チュートリアル）
●アルファ順のHTML要素参照
●HTML要素参照
ルール
HTMLの美しさは、従うべきルールがいくつかあり、覚えやすい
*HTMLは大文字と小文字を区別しません
大文字、小文字、または大文字と小文字が混在しています–HTMLを好きなように記述します。 一般的な方法は小文字です。
*すべての開いているタグには閉じたタグがなければなりません
これには例外がありますが、実際に簡単にするために、開いているすべてのタグ
*タグは、ブロック内で開かれる逆の順序で閉じられます
これは少し理解するのが難しい場合がありますので、ここで例を示します。
<p>ここには<strong>段落があり、<a href=”url here”>リンク</a></strong>内部にあり、テキストの一部が強調されています。</p>
注文に注意してください：<p><strong><a>….</a></strong></p>
* 一部の要素には、<br>や<img>などの終了タグ
タグがないため、終了タグがありません。
*HTMLを正しく使用し、ページのスタイルを設定しないでください
たとえば、リストがあるときは<br>タグを使用しないでください。 または、レイアウト用のグリッドを作成するために<table>タグを使用しないでください。
テキストエディタツールバー
テキストエディタにコードを書くのが効率的であるため、一般的にツールバーを使用しません。 ただし、HTMLを使い始める場合は、HTMLを教える方法として役立つツールがいくつかあるかもしれません。 最終的には、ツールバーで許可されているタグよりも、コンテンツを適切にマークアップするために使用できるタグが多いことに気付くでしょう。
HTMLプラグイン
遅かれ早かれ、ビジュアルエディタで段落を作成すると、テキストエディタでコピーを見たときに<p>タグが表示されないことに気づ それはあなたを気にさせてはいけません。 コピーがページに表示されると、WordPressは引き続き<p>タグを生成します。
コードにこの問題やその他の問題がある場合は、これらのプラグインを使用することをお勧めします。
常にHTMLで編集
これは、ページの作成または編集またはコンテンツの投稿に行くとき、エディタは常にビジュアルエディタではなくテキストエディ ビジュアルエディタが使用されている状況では、WordPressがタグを取り除くことができるので、これは非常に便利です。
Htmlエディタのマークアップを保持するプラス
タグを削除することに問題がある場合は、これが解決策になる可能性があります。
HTMLエディタ構文ハイライト
これは、色分けされた宝庫に当たり障りのないテキストエディタをオンに素晴らしいプラグインです。 また、黒の背景と大きなフォントに変更することができます。 これは、フルスクリーンオプションでこのプラグインを使用することをお勧めします。
注:私はこれらのプラグインの二つ以上を同時にテストしていないので、非互換性が存在する可能性があります。
どのようにショートコードは、画像に収まる
ショートコードは、多くのプラグインは、フォームを追加列を設定したり、ページやポストにいくつかの他の機能を追 これらの言語について何も知らなくても、HTML、javascript、CSS、PHPなどのコードを簡単に追加することができます。
ビジュアルエディタと同じように、テキストエディタでショートコードを使用します。
初心者には、ショートコードはHTMLのように見えるかもしれませんが、そうではありません。
人気のあるContact Form7プラグイン
を使用してコンタクトフォームを追加する場合は、この方法でショートコードを貼り付けるか、プラグイン
Content for left side of column
content for right side of column
Content for right side of column
ページ上に二つの列を作成するプラグインのように使用することができます。
そのショートコードは、オープンタグとクローズタグを持つHTMLのように見えますが、それは
ではありませんテキストエディタを使用してCSSスタイルを追加
テキストエディタで追加したコンテンツにCSSスタイルプロパティを提供することができます。 これは、デフォルトのビジュアルエディタでは実行できません。
テキストエディタでは2つの方法で行うことができます。
一つの方法は、この例のようにHTML要素にidまたはclass属性を追加することです:
<p id=”lead”>これは私の投稿のリード段落です。</p>
次に、あなたのスタイルで。cssファイル#leadのスタイルプロパティを追加します。 たぶんこのようなもの：
#lead
{font-weight:bold;
text-align:center;
color:#f00;}
第二の方法は、インラインスタイリングを追加することです。 （ただし、最善の方法は、上記のシナリオのようにHTMLとCSSを別々に保つことです。)次のようにインラインスタイルを追加できます:
<p style=”font-family:arial,helvetica,sans-serif”>この段落のフォントはArialです。</p>
注:これは、外部ファイルまたはページの<head>コンテナ内に存在する可能性のあるこの段落のフォントファミリースタイルルールを上書きします。
結論
テキストエディタを使用すると、ページの書式設定やコンテンツの投稿方法を完全に制御できます。 テキストエディタツールバーのタグだけでなく、任意のHTMLタグを使用できます。 結果は人々およびサーチエンジンのくもによって読み易く、理解し易い内容である。 HTMLを書くのに慣れるには少し時間がかかるかもしれませんが、最終的にはそれが非常に満足できるものになるでしょう。
著者略歴
バド-クラウス[email protected] ニューヨーク市のベテランWordPressの講師であり、ウェビナーを介して個人やグループのためのWordPressを教えています。 彼はまた、中小企業のためのサイトで動作します。 http://joyofwp.com