WordPressはドラッグ＆ドロップ、でも...私がいまだにHTMLをいじり続ける理由

ウェブサイトが実際にどのように機能しているのか、不思議に思ったことはないだろうか。

魔法のように見えるかもしれないが、あなたが見ているすべてのウェブページの背後には言語がある。その言語はHTMLと呼ばれる。

HTMLはインターネットの基本的な構成要素だと考えてください。

ほんの少しHTMLの知識があるだけで、WordPressのレベルアップにつながります。私は、HTMLの知識がWordPressのウェブサイトをより良いものにしていくのを目の当たりにしてきました。

この記事では、HTMLとは何か、なぜ重要なのか、そしてWordPressサイトにカスタムHTMLコードを追加する方法について説明します。

効果的なウェブデザインのためにどれほど簡単で役に立つか、驚くかもしれない！

HTMLとは何か？

HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（HyperText Markup Language）の略です。基本的に、HTMLはウェブコンテンツを構成する言語です。ウェブページの骨組みと考えてください。

HTMLは「タグ」と呼ばれるものを使用します。タグはウェブブラウザに、コンテンツの各部分が何であるかを伝えます。

たとえば、タグはブラウザに見出し、段落、画像であることを伝えることができます。ブラウザはこれらのタグを読み取り、ウェブページを表示します。

HTMLはプログラミング言語ではない。むしろ、ブラウザが理解できるように情報を整理する方法のようなものだ。

なぜWordPressのHTMLを気にする必要があるのか？

WordPressはとても使いやすい。コードを知らなくてもウェブサイト全体を構築できる。では、なぜわざわざHTMLを使うのでしょうか？

HTMLを使えば、コンテンツをより自由にコントロールできる。WordPressのエディタでは物足りないこともある。

画像に特定の属性を追加したいとします。あるいは、本当にユニークなリスト・スタイルを作りたいかもしれない。HTMLではそんなことができる。

HTMLはトラブルシューティングの救世主でもある。

WordPressで奇妙な書式設定の問題が発生したことはありませんか？HTMLを見れば、問題を素早く見つけて修正することができます。ビジュアルエディターで推測するよりもずっと速い。

さらに、HTMLには柔軟性があります。高度なカスタマイズを加えたいですか？スタイリング用のカスタムクラスや、より複雑なレイアウトなど。HTMLはそのような可能性を解き放ちます。

そしてこれが大きなポイントだ。

WordPressは常に変化している。でもHTMLは？それはウェブの基本的なスキルであり、いつまでも役に立つものだ。

HTMLを理解することで、ウェブの世界に適応できるようになる。

HTML入門：基本編

HTMLの構成要素について話そう。タグと呼ばれるものだ。

タグとは、ブラウザがあなたのコンテンツに対して何をすべきかを指示するものです。ほとんどのタグは、開始タグと終了タグのペアになっています。

例えば、段落を作成したい場合は <p> タグで開始し </p> で終わらせる。

閉じタグにスラッシュがあるでしょ？これで終わりとわかる。

よく使うHTMLタグを見てみよう：

見出しはタイトルと小見出しのためにある。あなたは <h1>, <h2>, <h3>, <h4>, <h5>そして <h6>.

<h1> は最も重要な見出し（通常はメインタイトル）であり <h6> が最も重要ではない。

リンクはウェブを、まあ、ウェブたらしめている！その <a> タグはリンクを作成する。 <a> はアンカーを意味する。

写真を見せたい？その <img> タグはあなたの味方だ。 <img> はイメージの略。

リストを作りたい？HTMLがそれをカバーします。主に2つのタイプがあります：

<ul> 順序なしリスト（箇条書き）のためのものです。「ul」は「unordered list」の略です。
<ol> 順序付きリスト（番号付きリスト）のこと。「ol」は「ordered list」の略。

そして、両者の内部には <ul> そして <ol>を使用する。 <li> タグをリスト内の各アイテムに追加する。「li "は "list item "を表します。

タグは属性を持つこともできます。属性はタグに関する追加情報を与えます。

例えば <a> タグには href 属性でリンク先を指定する。このように： <a href="https://example.com">Link text</a>.その href 属性はウェブサイトのアドレスを保持します。

そして <img> タグには src 属性で画像ファイルの場所を指定します。画像が読み込めない場合やアクセシビリティのために重要です。

こんな感じだ： <img src="image.jpg" alt="Descriptive text">.

HTMLの超シンプルな実例がここにある：

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

このコードは、ウェブページに大見出し、段落、リンクを作成する。

私が初めてHTMLを学び始めたとき、これらの基本タグは私の出発点だった。そして正直なところ？正直なところ、今でも私がオンラインで行うほぼすべてのことの基礎となっている。これらのシンプルなタグは強力だ！

HTMLを仕事に活かす：実践例

では、実際にWordPressでHTMLを使うにはどうすればいいのでしょうか？いくつかの例を見てみよう。

テキストを太字や斜体にしたい？HTMLならそれができます。

用途 <strong> そして </strong> タグを使ってテキストを太字にする。または <b> そして </b> タグを使えば、テキストを太字にすることもできる。

こんな感じだ： <strong>This text is bold</strong>.

斜体の場合は <em> または <i>.こんな感じだ： <em>This text is italic</em>.

これらのタグは、コンテンツ内の単語やフレーズを強調するのに役立ちます。

について話した。 <a> タグを使用します。あなたのサイトの他のページや他のウェブサイトへのリンクに使用できます。

テキストや画像、あるいはボタンをリンクさせることもできる。すべては <a> タグを右の href 属性を持つ。

YouTubeやVimeoの動画をWordPressサイトに追加したいですか？ほとんどの動画プラットフォームは埋め込みコードを提供しています。これらのコードは通常HTMLで、多くの場合 <iframe> のタグがある。

YouTube（または動画がホストされている場所）から埋め込みコードをコピーし、WordPressに貼り付けるだけです。WordPressはそのコードをどうすればいいか知っています。

箇条書きリストが必要ですか？使用方法 <ul> タグを使用します。番号付きリストには <ol> そして <li> のタグがある。

コンテンツのセクションを区切るために行を追加したいですか？その場合は <hr> タグは水平方向の罫線を作ります。テキストを視覚的に分割するシンプルな方法です。

これらはほんの一例ですが、HTMLがWordPressでいかに役立つかがお分かりいただけると思います。これは、ウェブサイトのコンテンツにちょっとした構造と追加機能を加えるということなのです。

ワードプレスHTMLの学び方

HTMLって便利そうだけど、どうやって学べばいいんだろう？いい質問だ！幸いなことに、世の中には素晴らしいリソースが山ほどある。

今すぐHTMLを学び始められる場所をいくつか紹介しよう。

MDN Web Docsはウェブ開発の百科事典のようなものだ。Mozilla（Firefoxの開発者たち）によって作られており、非常に包括的で信頼できる。

インタラクティブな学習が好きなら、Codecademyは素晴らしい。ブラウザ上で実際にコードを書くコースがある。

W3schoolsはウェブ開発チュートリアルの人気サイトです。HTMLの例や参考文献がたくさんあります。

WordPressで具体的にHTMLがどのように使われているか見たいですか？公式のWordPress開発者向けドキュメントをご覧ください。少し専門的ですが、慣れてくれば素晴らしいリソースになります。

どの情報源を選ぶにせよ、最も重要なのは練習だ。真剣に。読んでいるだけではHTMLは学べない。コードを書いて、何が起こるか見てみることだ。

実験！壊すことを恐れてはいけない。そうやって学ぶんだ。

ワードプレスHTMLの使い方

WordPressでHTMLを使う方法はたくさんある。ひとつずつ見ていこう。

1.ブロックエディターでカスタムHTMLブロックを追加する

WordPressのブロックエディター（Gutenberg）を使っている場合、HTML専用の特別なブロックを使うことができます。これはカスタムHTMLブロックと呼ばれています。

使用するには、WordPressのページまたは投稿に新しいブロックを追加するだけです。ブロックの検索バーで「HTML」を検索します。カスタムHTMLブロックがポップアップ表示されます。

クリックするとコンテンツに追加されます。他のブロックを追加するのと同じです。好きな場所にドラッグ＆ドロップすることもできます。

ブロックを追加すると、WordPressのHTMLコードを入力または貼り付けるボックスが表示されます。そこにあなたのHTMLを入力してください。

プレビューをクリックすると、HTMLコードを実際に公開することなく、ページ上でどのように見えるかを確認できます。

これはコードをチェックするのにとても便利だ。

2.HTMLでブロックを編集する

WordPressのブロックをHTMLとして編集できることをご存知ですか？そう、普通の段落ブロックもです。

これは、すでにあるブロックにちょっとしたHTMLの調整を加えたい場合に便利だ。

まず、編集したいブロックをクリックします。次に、ブロックのツールバーにある3つの点を探します。それをクリックする。

メニューがポップアップします。そのメニューで、「HTMLとして編集」ボタンを押す。

突然、ブロックが変形します！いつものビジュアルエディタの代わりに、そのブロックのカスタムHTMLコードが表示されます。これでHTMLを直接編集できるようになりました。

これはちょっとした微調整に最適だ。後でスタイリングするために、段落に特定のクラスを追加したいかもしれない。あるいは、HTMLの方が扱いやすい小さな書式の問題を修正する必要があるかもしれない。

HTMLの編集が終わったら、ブロックツールバーのEdit visuallyをクリックして、通常のビジュアルエディタビューに戻ることができます。

3.Gutenbergのコードエディタを使う

コードの扱いに慣れている人のために、WordPressのブロックエディタには完全なコードエディタビューがあります。これは、投稿やページ全体のHTMLコードを表示します。

コードエディターに切り替えるには、Gutenbergエディター画面の右上を見てください。エディタ全体のメインオプションメニューです。その点をクリックしてください。

そのメニューの中に、コード・エディターというオプションがあります。それをクリックしてください。

タグやページ全体の構造がコードで表示されます。

このWordPress HTMLエディターは、コードで直接作業することを好む上級ユーザー向けです。コーディングが好きで、ページの大局的なHTML構造を見たいのであれば、コードエディタが向いています。

しかし、注意してほしい！HTMLを間違えると、ページのレイアウトが崩れてしまいます。コードエディターを多用するのであれば、HTMLを理解することが重要です。

通常のビジュアル・エディターに戻りたい場合は、右上のメニューに戻ってビジュアル・エディターをクリックしてください。

4.クラシックエディターでHTMLを追加する

クラシックWordPressエディターには2つのタブがある：ビジュアルとテキストです。テキストタブは、あなたがコードに入ることができる場所です。

テキストをクリックすると、投稿のHTMLコードがすべて表示されます。ここにHTMLコードを直接書き込んだり、貼り付けたりすることができます。

HTMLを追加または編集した後、ビジュアル・タブに戻り、どのように見えるかを確認することができます。HTMLのレンダリングバージョンが表示されます。

5.WordPress Code Snippetsプラグインを使う

WordPressサイトにHTMLやCSS、JavaScriptを追加したいことがあります。カスタムのトラッキングコードを追加したいとか、サイトの特定の部分に特別なスタイルを追加したいとか。

テーマファイルを編集してこれを行うこともできますが、リスクがあります。また、テーマがアップデートされた場合、変更が上書きされてしまうかもしれません。

そこでコードスニペットプラグインの出番だ。これらのプラグインを使えば、WordPressのダッシュボードからすぐにコードスニペットを追加することができます。

コードを整理し、テーマファイルから分離します。特にコードの専門家でない場合は、この方がはるかに安全で管理しやすくなります。

コード・スニペットを追加する前に、ウェブサイトのバックアップを取ることをお勧めします！

Duplicatorは、WordPressサイトのフルバックアップを超簡単に作成できるプラグインです。コードを変更する前に必ずバックアップを取ることをお勧めします。

私のお気に入りのコード・スニペット・プラグインはWPCode（旧「Insert Headers and Footers」）だ。このツールを使えば、ウェブサイトにHTML、CSS、JavaScriptを追加することができる。

さらに、コーディングに慣れていない人でも使えるように、あらかじめ用意されたスニペットが大量にある。

コード・スニペット・プラグインを使えば、テーマファイルを直接編集するよりも安全です。また、カスタムコードを追跡するのも簡単です。

6.WordPressウィジェットにHTMLを追加する

WordPressには、カスタムHTML用のウィジェットが組み込まれています。このウィジェットを見つけるには、WordPressのダッシュボードに行き、「外観」から「ウィジェット」をクリックします。

サイドバーやフッターなど、さまざまなウィジェットエリアが表示されます。これらはWordPressテーマによって異なります。

カスタムHTMLウィジェットを、HTMLを追加したいウィジェットエリアに追加します。

このボックスにHTMLを入力するか、ペーストしてください。

ウィジェットにはHTMLで様々なものを追加できます。カスタムテキスト、画像、リンク、埋め込みコードまで、すべて使えます！

HTMLを追加したら、ウィジェット設定の更新ボタンをクリックしてください。

これで完了です！あなたのHTMLは、あなたのウェブサイトのウィジェット・エリアに表示されます。

7.WordPressテーマでHTMLを編集する

実際にWordPressのテーマファイルに入り、そこでHTMLを編集することができる。これによって、サイトの構造をかなりコントロールできるようになるが、大きなリスクも伴う。

テーマファイルを直接編集すると、気をつけないとウェブサイトが壊れてしまうことがあります。コードのちょっとしたミスが大きな問題を引き起こすこともある。

テーマファイルを編集するなら、常に子テーマを使うことをお勧めする。子テーマはメインテーマの安全なコピーのようなもので、安全に変更を加えることができる。こうすれば、メインテーマが更新されても、あなたの変更が上書きされることはない。

さて、警告はさておき、テーマファイルを編集する方法を説明しよう。WordPressのダッシュボードで、「外観」から「テーマファイルエディター」（単に「テーマエディター」と呼ばれることもある）に進みます。

右側には、テーマファイルのリストが表示されます。これらのファイルは、ウェブサイトの構造とレイアウトを制御します。

HTMLを含む一般的なファイルには次のようなものがある：

header.phpを参照してください：このファイルは通常、ウェブサイトの一番上、つまりヘッダー部分をコントロールします。
footer.php：このファイルは、一番下のフッターエリアをコントロールします。
sidebar.php：あなたのテーマにサイドバーがある場合、このファイルがそれを制御します。
index.php：ブログ記事を表示するウェブサイトのメインページです。
single.php：個々のブログ記事の表示方法を制御します。
page.php：通常のページ（「会社概要」や「お問い合わせ」など）の表示方法を制御します。
テンプレートファイル：あなたのテーマには、異なるタイプのページ用のテンプレートファイルがあるかもしれません。

HTMLはテーマファイルエディターで直接編集できます。ファイルをクリックして開き、変更したいHTMLを見つけて編集します。その後、ファイルを更新をクリックして変更を保存します。

覚えておいてください：また、常に子テーマを使用し、バックアップを取っておくこと。

私の経験では、テーマファイルを編集するのは、他の方法ではできない非常に特殊なカスタマイズをするときだけだ。そしてその場合でも、私は超慎重だ。子テーマとDuplicatorのバックアップは、テーマファイルを触るときの私のワークフローの一部です。

8.FTPを使ってWordPressのHTMLを編集する

FTPはFile Transfer Protocolの略です。WordPressのテーマファイル（およびその他のファイル）を編集するための最も直接的なアクセスを提供します。

FTPを使うには、いくつかのものが必要だ：

FTP クライアント FTPクライアント:サーバーに接続するためのソフトウェアです。人気のFTPクライアントはFileZilla、Cyberduck、Transmitです。
FTP認証情報：ウェブホスティングプロバイダーから入手できます。通常、FTPホスト、ユーザー名、パスワード、ポート番号が含まれます。

FTP認証情報が見つからない場合は、ホスティングアカウントの設定を確認するか、サポートにお問い合わせください。

これができたら、FTPクライアントを開き、FTP認証情報を入力してサーバーに接続します。

接続すると、2つの面が表示されます。一方はあなたのコンピューター上のファイルを表示し、もう一方はウェブサーバー上のファイルを表示します。

サーバー側のWordPressテーマファイルに移動します。パスは通常/wp-content/themes/your-theme-name/のようなものです。

バックアップが完了し、FTP経由でテーマフォルダに入ったら、テーマのHTMLファイルをパソコンにダウンロードしたり、直接編集したりすることができます。

FTPクライアントでファイルを右クリックし、ダウンロードまたは表示/編集を選択するだけです。

ダウンロードしたファイルをコードエディターを使って編集する。VS Code、Sublime Text、Atom、Notepad++などがよいでしょう。

コードエディターでファイルを開き、HTMLを変更してください。

HTMLの追加が終わったら、ファイルを保存します。FTPクライアントでファイルを右クリックし、アップロードを選択します。これでサーバー上のオリジナルファイルが編集したファイルで上書きされます。

FTPは強力なツールですが、技術的なノウハウが必要です。また、使用する際には責任を持つことが重要です。アップロードする前に必ず変更を再確認し、常にバックアップを用意しておきましょう。

よくある質問 (FAQ)

ElementorでHTMLコードを追加するにはどうすればよいですか？

HTMLウィジェットを使用して、ElementorにHTMLコードを追加します。ウィジェットをレイアウトにドラッグし、HTMLコードをコンテンツボックスに貼り付けます。この方法によって、テーマファイルを編集することなく、ページの任意の場所にカスタムHTMLを挿入できます。

WordPressのヘッダーにHTMLコードを追加するには？

Add HTML code in WordPress headers by inserting it into the <head> section using a plugin like WPCode. Install the plugin and find the Header & Footer tab. Add HTML code into the header code box and save your changes. This avoids editing theme files directly.

最高のWordPressコードエディタ・プラグインは？

最高のWordPressコードエディタプラグインはWPCode（旧Insert Headers and Footers）です。WPCodeを使えば、テーマファイルを編集することなく、安全にサイトにカスタムコードを追加することができる。CSS、HTML、JavaScript、PHPの追加をサポートしています。さらに、エラー保護と条件付きロジックが含まれており、ターゲットを絞ったコード配置が可能です。

ワードプレスはHTMLかPHPか？

WordPressは主にPHPで構築されており、サーバー上で動作して動的コンテンツを生成します。また、HTML、CSS、JavaScriptを使用して、ブラウザでウェブページをレンダリングし、スタイルを整えます。PHPはバックエンドのロジックを処理し、HTMLはユーザーに表示されるコンテンツを構造化します。

WordPressのHTMLテンプレートはどこで手に入りますか？

ThemeForestやTemplateMonsterのようなマーケットプレイスでWordPressのHTMLテンプレートを見つけましょう。これらのプラットフォームは、WordPress開発に適応できるプロフェッショナルなデザインのHTMLテンプレートを提供しています。ダウンロードしてカスタマイズし、ページビルダーやテーマフレームワークを使って変換します。

最終的な感想

HTMLを少しでも学べば、WordPressの新しい可能性が広がります。HTMLを学ぶことで、より多くのことをコントロールでき、より柔軟になり、ウェブサイトが実際にどのように機能するのかをより深く理解できるようになります。

学ぶこと、実験することを恐れないでください。コードで遊べば遊ぶほど、より快適になるでしょう。

私が紹介したリソースを探したり、WordPressでHTMLを追加するさまざまな方法を試してみたり、とにかくどんなものが作れるか見てみよう！

そして、大きな変更を加える前には必ずサイトのバックアップを取ることを忘れないでください！Duplicatorのようなツールを使えばバックアップは簡単で、後々の頭痛の種をかなり減らすことができます。

デュプリケーターを始める

ここにいる間に、他のWordPressガイドも気に入ると思う：

ジョエラ・ダンコンテンツライター

ジョエラはWordPressで長年の経験を持つライターです。Duplicatorでは、基本的なバックアップから大規模な移行まで、サイトのメンテナンスを専門としています。彼女の最終的なゴールは、あなたのWordPressウェブサイトが安全で、成長できるようにすることです。

略歴を見る