デュプリケーターの新しい移行サービス：指一本触れずにウェブサイトを移動
WordPressの移行に貴重な時間を奪われていませんか？Duplicatorの新しいマイグレーションサービスは、最初から最後まで3...
デュプリケーターの新しい移行サービス：指一本触れずにウェブサイトを移動
ジョエラ・ダン
ジョエラ・ダン
ジョン・ターナー
ジョン・ターナー
ウェブサイトが実際にどのように機能しているのか、不思議に思ったことはないだろうか。
魔法のように見えるかもしれないが、あなたが見ているすべてのウェブページの背後には言語がある。その言語はHTMLと呼ばれる。
HTMLはインターネットの基本的な構成要素だと考えてください。
ほんの少しHTMLの知識があるだけで、WordPressのレベルアップにつながります。私は、HTMLの知識がWordPressのウェブサイトをより良いものにしていくのを目の当たりにしてきました。
この記事では、HTMLとは何か、なぜ重要なのか、そしてWordPressサイトにカスタムHTMLコードを追加する方法について説明します。
効果的なウェブデザインのためにどれほど簡単で役に立つか、驚くかもしれない！
HTMLとは、ハイパーテキスト・マークアップ・ランゲージ（HyperText Markup Language）の略です。基本的に、HTMLはウェブコンテンツを構成する言語です。ウェブページの骨組みと考えてください。
HTMLは「タグ」と呼ばれるものを使用します。タグはウェブブラウザに、コンテンツの各部分が何であるかを伝えます。
たとえば、タグはブラウザに見出し、段落、画像であることを伝えることができます。ブラウザはこれらのタグを読み取り、ウェブページを表示します。
HTMLはプログラミング言語ではない。むしろ、ブラウザが理解できるように情報を整理する方法のようなものだ。
WordPressはとても使いやすい。コードを知らなくてもウェブサイト全体を構築できる。では、なぜわざわざHTMLを使うのでしょうか？
HTMLを使えば、コンテンツをより自由にコントロールできる。WordPressのエディタでは物足りないこともある。
画像に特定の属性を追加したいとします。あるいは、本当にユニークなリスト・スタイルを作りたいかもしれない。HTMLではそんなことができる。
HTMLはトラブルシューティングの救世主でもある。
WordPressで奇妙な書式設定の問題が発生したことはありませんか？HTMLを見れば、問題を素早く見つけて修正することができます。ビジュアルエディターで推測するよりもずっと速い。
さらに、HTMLには柔軟性があります。高度なカスタマイズを加えたいですか？スタイリング用のカスタムクラスや、より複雑なレイアウトなど。HTMLはそのような可能性を解き放ちます。
そしてこれが大きなポイントだ。
WordPressは常に変化している。でも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を学び始めたとき、これらの基本タグは私の出発点だった。そして正直なところ？正直なところ、今でも私がオンラインで行うほぼすべてのことの基礎となっている。これらのシンプルなタグは強力だ！
では、実際に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を学び始められる場所をいくつか紹介しよう。
MDN Web Docsはウェブ開発の百科事典のようなものだ。Mozilla（Firefoxの開発者たち）によって作られており、非常に包括的で信頼できる。
インタラクティブな学習が好きなら、Codecademyは素晴らしい。ブラウザ上で実際にコードを書くコースがある。
W3schoolsはウェブ開発チュートリアルの人気サイトです。HTMLの例や参考文献がたくさんあります。
WordPressで具体的にHTMLがどのように使われているか見たいですか？公式のWordPress開発者向けドキュメントをご覧ください。少し専門的ですが、慣れてくれば素晴らしいリソースになります。
どの情報源を選ぶにせよ、最も重要なのは練習だ。真剣に。読んでいるだけではHTMLは学べない。コードを書いて、何が起こるか見てみることだ。
実験！壊すことを恐れてはいけない。そうやって学ぶんだ。
WordPressでHTMLを使う方法はたくさんある。ひとつずつ見ていこう。
WordPressのブロックエディター（Gutenberg）を使っている場合、HTML専用の特別なブロックを使うことができます。これはカスタムHTMLブロックと呼ばれています。
使用するには、WordPressのページまたは投稿に新しいブロックを追加するだけです。ブロックの検索バーで「HTML」を検索します。カスタムHTMLブロックがポップアップ表示されます。
クリックするとコンテンツに追加されます。他のブロックを追加するのと同じです。好きな場所にドラッグ＆ドロップすることもできます。
ブロックを追加すると、WordPressのHTMLコードを入力または貼り付けるボックスが表示されます。そこにあなたのHTMLを入力してください。
プレビューをクリックすると、HTMLコードを実際に公開することなく、ページ上でどのように見えるかを確認できます。
これはコードをチェックするのにとても便利だ。
WordPressのブロックをHTMLとして編集できることをご存知ですか？そう、普通の段落ブロックもです。
これは、すでにあるブロックにちょっとしたHTMLの調整を加えたい場合に便利だ。
まず、編集したいブロックをクリックします。次に、ブロックのツールバーにある3つの点を探します。それをクリックする。
メニューがポップアップします。そのメニューで、「HTMLとして編集」ボタンを押す。
突然、ブロックが変形します！いつものビジュアルエディタの代わりに、そのブロックのカスタムHTMLコードが表示されます。これでHTMLを直接編集できるようになりました。
これはちょっとした微調整に最適だ。後でスタイリングするために、段落に特定のクラスを追加したいかもしれない。あるいは、HTMLの方が扱いやすい小さな書式の問題を修正する必要があるかもしれない。
HTMLの編集が終わったら、ブロックツールバーのEdit visuallyをクリックして、通常のビジュアルエディタビューに戻ることができます。
コードの扱いに慣れている人のために、WordPressのブロックエディタには完全なコードエディタビューがあります。これは、投稿やページ全体のHTMLコードを表示します。
コードエディターに切り替えるには、Gutenbergエディター画面の右上を見てください。エディタ全体のメインオプションメニューです。その点をクリックしてください。
そのメニューの中に、コード・エディターというオプションがあります。それをクリックしてください。
タグやページ全体の構造がコードで表示されます。
このWordPress HTMLエディターは、コードで直接作業することを好む上級ユーザー向けです。コーディングが好きで、ページの大局的なHTML構造を見たいのであれば、コードエディタが向いています。
しかし、注意してほしい！HTMLを間違えると、ページのレイアウトが崩れてしまいます。コードエディターを多用するのであれば、HTMLを理解することが重要です。
通常のビジュアル・エディターに戻りたい場合は、右上のメニューに戻ってビジュアル・エディターをクリックしてください。
クラシックWordPressエディターには2つのタブがある：ビジュアルとテキストです。テキストタブは、あなたがコードに入ることができる場所です。
テキストをクリックすると、投稿のHTMLコードがすべて表示されます。ここにHTMLコードを直接書き込んだり、貼り付けたりすることができます。
HTMLを追加または編集した後、ビジュアル・タブに戻り、どのように見えるかを確認することができます。HTMLのレンダリングバージョンが表示されます。
WordPressサイトにHTMLやCSS、JavaScriptを追加したいことがあります。カスタムのトラッキングコードを追加したいとか、サイトの特定の部分に特別なスタイルを追加したいとか。
テーマファイルを編集してこれを行うこともできますが、リスクがあります。また、テーマがアップデートされた場合、変更が上書きされてしまうかもしれません。
そこでコードスニペットプラグインの出番だ。これらのプラグインを使えば、WordPressのダッシュボードからすぐにコードスニペットを追加することができます。
コードを整理し、テーマファイルから分離します。特にコードの専門家でない場合は、この方がはるかに安全で管理しやすくなります。
私のお気に入りのコード・スニペット・プラグインはWPCode（旧「Insert Headers and Footers」）だ。このツールを使えば、ウェブサイトにHTML、CSS、JavaScriptを追加することができる。
さらに、コーディングに慣れていない人でも使えるように、あらかじめ用意されたスニペットが大量にある。
コード・スニペット・プラグインを使えば、テーマファイルを直接編集するよりも安全です。また、カスタムコードを追跡するのも簡単です。
WordPressには、カスタムHTML用のウィジェットが組み込まれています。このウィジェットを見つけるには、WordPressのダッシュボードに行き、「外観」から「ウィジェット」をクリックします。
サイドバーやフッターなど、さまざまなウィジェットエリアが表示されます。これらはWordPressテーマによって異なります。
カスタムHTMLウィジェットを、HTMLを追加したいウィジェットエリアに追加します。
このボックスにHTMLを入力するか、ペーストしてください。
ウィジェットにはHTMLで様々なものを追加できます。カスタムテキスト、画像、リンク、埋め込みコードまで、すべて使えます！
HTMLを追加したら、ウィジェット設定の更新ボタンをクリックしてください。
これで完了です！あなたのHTMLは、あなたのウェブサイトのウィジェット・エリアに表示されます。
実際にWordPressのテーマファイルに入り、そこでHTMLを編集することができる。これによって、サイトの構造をかなりコントロールできるようになるが、大きなリスクも伴う。
テーマファイルを直接編集すると、気をつけないとウェブサイトが壊れてしまうことがあります。コードのちょっとしたミスが大きな問題を引き起こすこともある。
さて、警告はさておき、テーマファイルを編集する方法を説明しよう。WordPressのダッシュボードで、「外観」から「テーマファイルエディター」（単に「テーマエディター」と呼ばれることもある）に進みます。
右側には、テーマファイルのリストが表示されます。これらのファイルは、ウェブサイトの構造とレイアウトを制御します。
HTMLを含む一般的なファイルには次のようなものがある：
HTMLはテーマファイルエディターで直接編集できます。ファイルをクリックして開き、変更したいHTMLを見つけて編集します。その後、ファイルを更新をクリックして変更を保存します。
覚えておいてください：また、常に子テーマを使用し、バックアップを取っておくこと。
私の経験では、テーマファイルを編集するのは、他の方法ではできない非常に特殊なカスタマイズをするときだけだ。そしてその場合でも、私は超慎重だ。子テーマとDuplicatorのバックアップは、テーマファイルを触るときの私のワークフローの一部です。
FTPはFile Transfer Protocolの略です。WordPressのテーマファイル（およびその他のファイル）を編集するための最も直接的なアクセスを提供します。
FTPを使うには、いくつかのものが必要だ：
これができたら、FTPクライアントを開き、FTP認証情報を入力してサーバーに接続します。
接続すると、2つの面が表示されます。一方はあなたのコンピューター上のファイルを表示し、もう一方はウェブサーバー上のファイルを表示します。
サーバー側のWordPressテーマファイルに移動します。パスは通常/wp-content/themes/your-theme-name/のようなものです。
バックアップが完了し、FTP経由でテーマフォルダに入ったら、テーマのHTMLファイルをパソコンにダウンロードしたり、直接編集したりすることができます。
FTPクライアントでファイルを右クリックし、ダウンロードまたは表示/編集を選択するだけです。
ダウンロードしたファイルをコードエディターを使って編集する。VS Code、Sublime Text、Atom、Notepad++などがよいでしょう。
コードエディターでファイルを開き、HTMLを変更してください。
HTMLの追加が終わったら、ファイルを保存します。FTPクライアントでファイルを右クリックし、アップロードを選択します。これでサーバー上のオリジナルファイルが編集したファイルで上書きされます。
FTPは強力なツールですが、技術的なノウハウが必要です。また、使用する際には責任を持つことが重要です。アップロードする前に必ず変更を再確認し、常にバックアップを用意しておきましょう。
HTMLウィジェットを使用して、ElementorにHTMLコードを追加します。ウィジェットをレイアウトにドラッグし、HTMLコードをコンテンツボックスに貼り付けます。この方法によって、テーマファイルを編集することなく、ページの任意の場所にカスタム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コードエディタプラグインはWPCode（旧Insert Headers and Footers）です。WPCodeを使えば、テーマファイルを編集することなく、安全にサイトにカスタムコードを追加することができる。CSS、HTML、JavaScript、PHPの追加をサポートしています。さらに、エラー保護と条件付きロジックが含まれており、ターゲットを絞ったコード配置が可能です。
WordPressは主にPHPで構築されており、サーバー上で動作して動的コンテンツを生成します。また、HTML、CSS、JavaScriptを使用して、ブラウザでウェブページをレンダリングし、スタイルを整えます。PHPはバックエンドのロジックを処理し、HTMLはユーザーに表示されるコンテンツを構造化します。
ThemeForestやTemplateMonsterのようなマーケットプレイスでWordPressのHTMLテンプレートを見つけましょう。これらのプラットフォームは、WordPress開発に適応できるプロフェッショナルなデザインのHTMLテンプレートを提供しています。ダウンロードしてカスタマイズし、ページビルダーやテーマフレームワークを使って変換します。
HTMLを少しでも学べば、WordPressの新しい可能性が広がります。HTMLを学ぶことで、より多くのことをコントロールでき、より柔軟になり、ウェブサイトが実際にどのように機能するのかをより深く理解できるようになります。
学ぶこと、実験することを恐れないでください。コードで遊べば遊ぶほど、より快適になるでしょう。
私が紹介したリソースを探したり、WordPressでHTMLを追加するさまざまな方法を試してみたり、とにかくどんなものが作れるか見てみよう！
そして、大きな変更を加える前には必ずサイトのバックアップを取ることを忘れないでください！Duplicatorのようなツールを使えばバックアップは簡単で、後々の頭痛の種をかなり減らすことができます。
ここにいる間に、他のWordPressガイドも気に入ると思う：
情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。
