WordPressとHTMLの違いと編集方法｜コード入力方法や自作HTMLの使い方【2024年最新版】

Webサイトを立ち上げる場合WordPressを使うか、HTMLでゼロからサイトを作成するかを迷われている方も多いのではないでしょうか。WordPressは初心者でも簡単にWebサイトを作れるだけでなくHTMLサイトとさまざまな違いがあります。そこでこの記事ではホームページ制作など、さまざまな分野の発注先を比較検討できる「アイミツ」が、WordPressとHTMLの違いや、WordPressでHTMLを編集する方法、コード入力方法、自作HTMLの使い方について詳しく解説します。

【関連ページ】
ホームページ制作にかかる費用・相場感や、目的別にホームページ制作会社をお探しいただけます。  
WordPressでのホームページ制作の費用と相場
WordPressに強いホームページ制作会社一覧

WordPressとHTMLの違いを理解するために、次の7点について解説します。
・WordPressの特徴
・WordPressでサイト作成するメリット
・WordPressでサイト作成するデメリット
・HTMLの特徴
・HTMLでサイト作成するメリット
・HTMLでサイト作成するデメリット
・WordPressにおけるHTML

WordPressとは、ひとことで説明すると「無料で簡単にWebサイトやブログ記事を作れる仕組み」を指します。ブログ記事やWebサイトに必要なテキストや画像、デザインなどを管理するCMS（コンテンツ管理システム）の1つです。WordPressは圧倒的なシェアを誇るCMSで、世界の4分の1のWebサイトがWordPressを利用しているといわれています。WordPressがこれだけ多くのユーザーに支持されるのは、PHPなどの専門的な知識をもたずとも動的サイトを作れるため。シンプルな管理画面で、直感的にテキスト入力や画像の挿入などができます。さらに、使いやすいだけでなく無料で利用できるので、多くのユーザーを獲得しているのでしょう。

HTMLを駆使して一からWebサイトを作るのではなく、WordPressを使うメリットは以下の3点だといえます。
・Webサイト制作初心者でも編集や管理がしやすい
・動的な機能を簡単に実装できる
・コンテンツを量産しやすい
WordPressは管理画面がシンプルで洗練されているため「Webサイト制作初心者でも編集や管理がしやすい」といえます。また、サーバーへ画像などを自動でアップロードできるため、専門的な知識も必要ありません。さらに、WordPressではテンプレートを使うことで、問い合わせフォームなどの「動的な機能を簡単に実装できる」のも大きな魅力でしょう。HTMLで動的な機能を実装するのは難易度が高く、コストがかかります。WordPressは「コンテンツを量産しやすい」点も、HTMLのWebサイトにはないメリットだといえます。HTMLのサイトの場合はコンテンツ制作に時間がかかりますが、WordPressであれば短時間で可能です。

HTMLでサイトを作らず、WordPressを使うことのデメリットには次の3点が挙げられます。
・セキュリティのリスクが相対的に高い
・ページを表示するスピードが遅い
・サーバーがダウンするリスクが相対的に高い
まず「セキュリティのリスクが相対的に高い」点がデメリットです。WordPressは利用者が非常に多く、悪意をもつ人も増えるためだといわれています。オープンソースのCMSであることもセキュリティのリスクです。2つ目のデメリットは「ページを表示するスピードが遅い」ことです。WordPressはHTMLのような静的サイトとは異なり、動的なページを生成する時間を要します。また、スピードが遅いだけではなくページを表示するためにかかる負荷も大きくなるため、WordPressはHTMLのサイトよりも「サーバーがダウンするリスクが相対的に高い」ところもデメリットだといわれています。

HTMLは「Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の頭文字をとった略称で、Webページを作成するためのマークアップ言語です。ハイパーテキストとは、リンクが挿入できるテキストのことで、HTMLを使うことで別ページへのリンクを設定できます。テキストエディタにHTMLタグを使ってコードを記入していくと、ハイパーリンクをコンピュータに認識させることができ、Webページを作成できます。Webページに表示させたい情報をHTML専用のタグで囲み、テキストにさまざまな特徴をもたせます。例えばheadタグで囲むことでタイトルとしての性格をもたせることが可能です。

HTMLでWebサイトを作成する場合、WordPressのサイトと比較したメリットは次の3点です。
・ページの表示スピードが速い
・サイトの仕組みを理解できるようになる
・サイト作成の柔軟性が高い
まず、HTMLで作られたサイトは「ページの表示スピードが速い」点がメリット。HTMLのサイトは静的サイトとも呼ばれており、すでに用意されているページをユーザーが呼び出し表示させるだけの、シンプルな作りです。2つ目のメリットはHTMLでWebサイトを作ると「サイトの仕組みを理解できるようになる」点。HTMLはWebページの基本的な構造で、WordPressでサイトを作る場合であっても、HTMLの知識は役に立ちます。さらにHTMLのWebサイトは「サイト作成の柔軟性が高い」点もメリットでしょう。ゼロからWebページを作成できるためです。ただし、柔軟性を活かし特徴的なWebサイトを作るには高度な専門知識を要します。

HTMLでWebサイトを作成する場合は、WordPressと比較して次のようなデメリットがあります。
・コードの知識が必要でサイト作成の難易度が高い
・ページを追加する手間が大きい
・動的なページが作れない
1つ目のデメリットはHTMLのWebサイトは「コードの知識が必要でサイト作成の難易度が高い」ことです。HTMLだけではなくCSSの知識がないとWebサイトは作れないため、WordPressと比較すると初心者にはサイト作成のハードルは高いでしょう。また、HTMLのサイトは1ページごとにHTMLの記述が必要なため「ページを追加する手間が大きい」です。新しい記事を追加したい場合や既存のページを修正したい場合は、新しいHTMLファイルを作りサーバー上にアップロードするなど手間がかかります。さらにHTMLでは基本的に「動的なページが作れない」ため、自動でリアルタイムにページを作成するようなことはできない点も大きなデメリットでしょう。

ここでWordPressとHTMLの関係についてより詳しく説明します。WordPressで作られたサイトには通常のサイトとは異なりHTMLファイルが存在しません。PHPファイルがページを表示する際にHTMLを自動生成してページを表示するしくみで、WordPressが「動的サイト」と呼ばれる理由です。WordPressサイトにはHTMLファイルが存在しない代わりに、PHPのテンプレートファイルがユーザーのリクエストのたびにデータベースからデータを取得しHTMLを生成しページを表示します。

「自社にあった会社が見つからない」「会社選びに時間が割けない」とお悩みの方は、お気軽に「アイミツ」にお問い合わせください。数あるホームページ制作会社からあなたの要望にあった会社をピックアップして無料でご紹介いたします。

WordPressで作ったWebページに使われているHTMLを編集する方法を紹介します。
・コードエディタでHTMLコードを入力
・ビジュアルエディタでHTMLコードを入力
コードエディタはHTMLを直接入力できるエディタです。ビジュアルエディタとは、グーテンベルグの通常のブロックエディタを指します。

コードエディタでHTMLコードを入力する方法を紹介します。まず、WordPressの管理画面で編集したいWebページの編集画面を開きます。コードエディタを開くには、WordPressの右上にある縦三点リーダーをクリックします。表示されたメニューの中から「コードエディター」を選ぶとコードエディタの入力画面が表示。コードエディタではHTMLを直接入力可能です。コードエディタにはWebページのHTMLコードが記載してあり、ここに直接HTMLを追加できます。コードエディタでのHTMLの入力が完了し、ビジュアルエディタに戻したい場合には「コードエディターを終了」をクリックすることで元の画面に戻ることができるでしょう。

次にビジュアルエディタでHTMLコードを入力する方法を紹介します。ビジュアルエディタは通常のブロックエディタの編集画面のことです。まず、画面の左上にある「+」をクリック。「ウィジェット」内にある「カスタムHTML」を選択してください。HTMLを入力するブロックが表示されます。任意のHTMLコードを入力することで、ビジュアルエディタでHTMLコードが入力可能です。既存のブロックを編集する場合には、ブロックの縦三点リーダーをクリックし、メニュー内の「HTMLとして編集」から、HTMLコードが表示されます。HTMLコードを追加して編集を進めてください。

WordPressで自作のHTMLを使うには、次の2つの方法があります。
・WordPressに自作HTMLを埋め込む
・個別ファイルとしてアップロードする
1つ目の方法はWordPressの固定ページに自作HTMLを埋め込む方法です。2つ目の方法はテキストエディタなどに記述したHTMLファイルをアップロードする方法です。

WordPressに自作HTMLを埋め込む方法を解説します。まず、固定ページを新規追加します。ブロック一覧から「カスタムHTML」を選択すると、HTMLを記述するブロックが表示。その中に自作HTMLを入力してください。実際の表示は、プレビューで確認できます。このHTMLブロックには、CSSやJavaScriptも記述可能。同じ固定ページに複数のHTMLブロックを作っても、同一ページに配置されます。JavaScriptやCSSは別ブロックに記述するのがおすすめです。注意点はコードブロックが狭いためコーディングがやりにくいこと。別でHTMLファイルを作り、コピー&ペーストするとよいでしょう。

次にHTMLを個別ファイルとしてWordPressにアップロードする方法を解説します。まずはHTMLファイルを作成しパソコンに保存してください。サーバーにログインし、WordPressがインストールされているフォルダ内に、HTMLをアップロードするためにフォルダを作成します。次にフォルダの権限を「755」に設定。これはハッキングなどによって今回設置するHTMLページが改変されるのを防ぐためです。最後に、作成したディレクトリにHTMLファイルをアップロードします。WordPressの画面上からはできないため、FTPを使ってアップロードしてください。これで完了です。正しくアップロードされているかブラウザを開いて確認しましょう。

最後にレイアウトごとのファイルの場所を紹介します。WordPressのトップページはヘッダー、コンテンツ、サイドバー、フッターというレイアウトに分かれています。これらのファイルを開くことで、直接HTMLを編集することも可能です。コンテンツ部分は「front-page.php」、ヘッダーは「header.php」、サイドバーは「sidebar.php」、フッターは「footer.php」というファイルに格納されています。これらのファイルはWordPressの管理画面の「外観」の「テーマエディター」から見つけることが可能。テーマファイルから編集したいレイアウトのファイルを開くと、HTMLを記述する画面が開きます。

つづいては、ホームページ制作にかかる費用相場をご紹介します。ホームページ制作の価格は、依頼する内容やページ数、機能により大きく変わります。具体的な費用目安は以下の通りです。

ホームページ制作の費用相場をご紹介しました。より正確な費用を知りたい方は料金シミュレーターをご利用ください。

WordPressとHTMLの違いや、WordPressのHTMLを編集する方法を解説しました。HTMLも理解しておくと、質の高いWebサイトをつくることができます。しかし、HTMLの記述には専門的な知識を要することもあり、ホームページ制作会社へ相談するのもおすすめです。プロに相談したい場合や自社にあった会社を探す際は、複数の会社から見積もりを取るようにしましょう。「アイミツ」では、ご要望をうかがった上で条件に合う複数のホームページ制作会社を無料でご紹介しています。お困りの方は、ぜひお気軽にご相談ください。

【相談前にまずは会社一覧を見たいという方はこちら】
WordPressに強いホームページ制作会社一覧
【費用感を知りたいという方はこちら】
WordPressでのホームページ制作の費用と相場