MarkoSaric
この記事は、あなたのWordPressのHTMLコードのためのワンストップショップです。 ここでは、コンテンツを作成するために最も一般的に使用されるWordPressのHTMLタグとコードのリストです。 リストを保存し、あなたのWordPressのブログの記事やページを構成するときにあなたの参照として使用します。
WordPress GutenbergエディタのHTML
WordPressは最高のブログプラットフォームの1つです。 何百万人もの人々やブランドは、見栄えの良いサイトを作成するためにそれを使用しています。
このガイドは、WordPressのセルフホストバージョンとホストバージョンの両方で有効です。 の違いを参照してくださいWordPress.com またはWordPress.org.
2018年12月にリリースされた新しいGutenberg editorを搭載したWordPress5.0は、ブログ投稿やページ内のHTMLタグの操作方法を劇的に改善し、容易にしました。
Gutenberg編集した投稿にHTMLコードを表示するにはどうすればよいですか？ “Code”ブロックを追加してコードを入力するだけです。 それはあなたの訪問者にコードが表示されます。
HTMLを使用してGutenbergの投稿を編集するにはどうすればよいですか？ 編集したい特定のブロックのオプションメニューの「HTMLとして編集」をクリックするだけです。
また、”Classic”ブロックまたは”Classic Editor”プラグインを追加して、この記事でさらに下に説明する以前のWYSIWYGエディタを持つこともできます。
クラシックエディタ：ビジュアルとテキストの違いは何ですか？
古典的なWordPressエディタでブログ記事やページを作成するときには、二つの編集オプションがあります。 デフォルトの”ビジュアル”ビューまたは”テキスト”モードを使用できます。
ビジュアルモードでは、コンテンツをそのまま見ることができます。 ビジュアルモードはwysiwygと呼ばれ、ビジュアルモードが何をするのかを正確に表します。
あなたはあなたのコンテンツをあなたの訪問者が彼らのブラウザでそれを見る方法を見て、あなたが編集するのに役立つ簡単なボタンを持 ほとんどの人は、コンテンツを作成するときにWordPressでこの「視覚的な」投稿エディタを使用します。
テキストモードでは、コードとHTMLタグが表示されます。 このテキストモードでは、あなたのブログの記事やページのいずれかに任意のHTMLコードを追加することができます。 HTMLベースのテキストエディタは恐ろしく見え、初心者にはあまり人気がありません。
しかし、あなたの投稿やページを作成するときにレイアウトや構造をコード化する方法を知っているか、もう少し制御したい場合はどうなりますか？ “テキスト”エディタを使用する必要があります。
WordPress Classic EditorでHTMLを編集するには？
では、HTMLテキストエディタにどのようにアクセスしますか？ WordPressの管理者投稿またはページ作成セクションで、「テキスト」タブをクリックします。 すべてのHTMLタグを追加および編集するのはテキストエディタにあります。
WordPressの投稿やページにHTMLコードを追加するには？
あなたは、単にあなたのWordPressの”テキスト”エディタで直接任意のHTMLコードを書くか、貼り付けることができます。 以下の私のリストから最も一般的に使用されるタグのいずれかでそれを試してみてください。
サイト上でここにコピーし、テキストエディタに貼り付け、あなたの投稿やページを”プレビュー”して、訪問者がそれをどのように見るかを確認します。
テキストモードからビジュアルモードに切り替えると、コードが削除されることがあります。
注意して、これがあなたに起こっていないことを確認してください。 または、この問題に遭遇しないようにコードを書く予定の場合にのみ、テキストエディタに固執してみてください。
コーディングに慣れている人のために、”ビジュアル”エディタを無効にすることもできます。 WordPressのナビゲーションメニューの”ユーザー”に移動し、”あなたのプロフィール”をクリックし、”書くときにビジュアルエディタを無効にする”を選択します。
Google Docs、Microsoft Word、WordPressの間でコピー＆ペースト
WordPress5.0リリースでは、Google DocsやMicrosoft WordからコンテンツをコピーしてWordPressの投稿やページに貼り付けることがスムーズで簡単になりました。
これは必ずしも容易ではありませんでした。 古典的なエディタでHTMLを操作するときは、時々いくつかのちんぷんかんぷんの文字に気づくことがあります。
これは、Microsoft WordからWordPressにコピー/貼り付けた場合に発生する可能性があります。 WordからWORDPRESSエディタにHTMLコードを貼り付けるときに便利なソースの1つはPostableです。
HtmlをWord（または別のソース）からツールにコピー/貼り付けて、WordPressのフレンドリーでクリーンなバージョンのコードを取得し、コンテンツに挿入できます。
ブログ記事にHTMLコードを通常のテキストとして表示するにはどうすればよいですか？
訪問者が通常のテキストのように表示するために、HTMLタグやその他のコードを投稿内に挿入して表示したい場合はどうですか？
私は私の記事でここでやっているようなものですか？ あなたはまだテキストエディタを使用していますが、あなたはこのようにあなたのコードをラップします:
<code><div class="header"></code> コードのよりよい表示のためのWordPressのHTML構文プラグイン
このプロセスのお手伝いをし、また、レイアウトとコードがあなたの訪問者のためにあなたのブロ
以下の二つをお勧めします。 SyntaxHighlighter Evolvedはより一般的なオプションですが、Pastacodeはブログを設計するときにページビルダーを使用する人に最適なオプションです。
最も一般的に使用されるWordPressのHTMLコードとタグ
画像を挿入する
<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">画像を新しい宛先にクリック可能にする
<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>リンクを挿入する
アンカーテキストはリンクの可視部分であることに注意してください。 それはあなたの訪問者があなたがにつながっているページに得るためにかちりと鳴ること単語か句である。
<a href="Destination-URL">Anchor text</a>リンクnofollowを作る
SEOの目的のためにあなたのリンクnofollowのいくつかを作る必要があるかもしれません。 ここではどのように:
<a href="Destination-URL" rel="nofollow">Anchor text</a>新しいブラウザウィンドウでリンクを開く
<a href="Destination-URL" target="_blank">Anchor text</a>長いページの特定のセクションへのリンク
これらはページジャンプと呼ばれます。 あなたの訪問者はリンクをかちりと鳴らし、記事の上のどこかにそれ以上の下でまたは動かされて得ることができる。
これは、目次を使用して異なる章に分割したい長いガイドに特に便利です。
ページジャンプを作成する最初の部分は、リンクしたいセクション（またはターゲット）を割り当てることです。
このコードは、リンクするページのどのセクションにも配置します。 第二部は、実際にあなたのイントロや目次からその割り当てられたセクションにリンクすることです。
<a></a><a href="#Specific-section">Anchor text</a>これは、ブログの別の記事からページの特定のセクションにリンクしたい場合にも機能します。 このターゲットへのリンクを挿入することができます：https://yourblog.com/yourpost/#Specific-section。
これは、これらの”トップに戻る”リンクがどのように機能するかでもあります。 投稿の上部にセクション名を割り当て、上部セクションにリンクする投稿の下部にある”上部に移動”ボタンを含めます。
著名なタイトルと小見出しの作成
<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>改行の挿入
<p>This is<br>a paragraph</br> with a line break</p>新しい段落の作成
<p>This is the first paragraph</p> <p>This is the second paragraph</p>箇条書きリストの作成
<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>番号付きリストの作成
<ol><li>list item with number 1</li><li>list item with number 2</li></ol>黄色（またはその他の色）の背景を持つポスト内のテキストを強調表示
<span style="background-color:yellow;">Your text</span>番号リスト内のアイテムの番号を割り当てます
<ol start="7"><li>List item number 7</li></ol>文字リストを作成します
<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>ローマ数字リストを作成します
<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>テキストを中央に配置します
<center>to be centered</center>テキストを太字にする
<strong>to be bold</strong>テキストを斜体にする
<em>to be italic</em>テキストの色を変更する
<span style="color: #000000;">Your text</span>blockquoteを挿入する
<blockquote>Your quote</blockquote>