WordPressをカスタマイズする際に欠かせないのがHTMLです。
しかし「具体的にどのファイルを編集すればいいの？」と悩んでいる方も多いはず。投稿や固定ページのHTMLの編集方法に悩んでいる方も少なくないでしょう。
本記事では、WordPressのHTMLの編集方法を解説します。
WordPressで作ったサイトのHTMLを編集する
WordPressのHTML編集は「PHPファイル」の中にあります。ここでは、サイト全体のHTMLを編集する方法を見ていきましょう。
WordPressは編集したい箇所によってファイルが違う
WordPressのトップページは、以下のようなレイアウトで構成されています。
各レイアウトのファイルは次の通りです。
- ヘッダー：header.php
- トップ：front-page.php
- サイドバー：sidebar.php
- フッター：footer.php
上記のファイルを表示するには、WordPressの管理画面から「外観」→「テーマエディター」の順に進んでください。
ちなみにコンテンツ部分を編集する際に使う「front-page.php」が見当たらない場合は「home.php」か「index.php」内を探してみてください。
任意のファイルを画面右側の「テーマファイル」から、HTMLを編集したいファイルを選択します。
編集が完了したら「ファイルを更新」をクリックすればOKです。
HTMLを編集する際は事前にバックアップを取っておき、確実に復元できるようにしておく方がベターです。バックアップはコード全体をコピーしておけば問題ありません。トラブルが起きた際は、コピーしておいたコードをペーストして復元してください。
デザインの編集はCSSで行う
背景や文字色、バナーサイズの変更などはCSSで行います。
CSSの編集方法
はじめにブラウザ上で編集したいページを表示させてください。次に以下のショートカットキーを入力して、コードを表示させます。
- Windows：「Ctrl」+「Shift」+「C」
- Mac：「command」+「shift」+「C」
検証モードに切り替わるので、編集したい場所を指定してください。
今回は例として、タイトル横にある文言を指定しました。画面右側の「Styles」の中にあるCSSを編集してみます。
編集したい箇所をクリックして、コードを追記してください。今回は例として、フォントサイズを大きくしてみました。
コードが反映されることが分かったら、こちらのコードをテーマに追記していきます。
CSSを編集する際は、テーマの「カスタマイズ」内にある「追加CSS」を使うのがおすすめです。テーマのCSSファイルを直接編集しなくて済むので、トラブルを未然に防ぐことができます。
追加CSSに任意のコードを入力して保存したら作業完了です。
HTMLの編集と合わせて活用してみてください。
WordPressの投稿や固定ページのHTMLを編集する
投稿記事や固定ページのHTMLを編集する方法は、お使いのエディターによって異なります。
ブロックエディターでHTMLを編集する
ブロックエディターの場合は、画面左上にある「+」ボタンをクリックしてください。
左側にリストが表示されるので「ウィジェット」にある「カスタムHTML」を選択します。
HTMLの入力欄が表示されます。任意のコードを入力して反映させましょう。
すでにブロックとして存在する文字をHTML編集する際は「︙」→「HTMLとして編集」の順でクリックしてください。
HTMLタグが表示されました。
用途に合わせてカスタマイズを完了したら、記事を保存して完了です。
クラシックエディターでHTMLを編集する
クラシックエディターの場合は「テキストモード」を選択すればHTMLの編集ができます。
ビジュアルモードに戻せば、かんたんなプレビューも確認可能です。
ちなみにデフォルトではクラシックエディターはサポートされていません。クラシックエディターを利用したい方は、無料のプラグイン「Classic Editor」を追加してください。
WordPressでは、管理画面の投稿や固定ページから記事を執筆できます。その本文の（メインコンテンツ）作成に使用するのが下記2つのエディタです。 現在は、WordPress5.0から導入されたブロックエディタ（Gutenberg）が標準のエディタに...
WordPressのHTMLが編集できない時の対処法
稀にWordPressのHTMLを編集できない問題が起きるケースがあります。HTMLの編集ができない方は、以下の原因をあたってみてください。
- WordPressからログアウトしている
- 編集権限がないアカウントでログインしている
- マルチサイトのサイトネットワーク管理者になっていない
WordPressからログアウトしている
よくあるミスの1つがWordPressからログアウトしているケースです。特にWordPress初心者は「自分のサイトなのに編集画面が開かない！」と焦ってしまうでしょう。
この場合、WordPressに再度ログインすれば管理画面にアクセスできるようになります。
- サイトのトップページを表示
- 「https://サイトURL/wp-login.php」と入力
- ログイン情報を入力してWordPressにログイン
お使いのブラウザに「https://サイトURL/wp-login.php」と入力します。
ちなみによくある間違いとして「https://サイトURL/wp-admin」と入力してログインできないケースがあります。正しくは「wp-admin」ではなく「wp-login.php」なので注意してください。
WordPressでサイト運営を行っていると、稀にログインできない問題が発生するケースも。そんな時は、冷静に「何が原因なのか」を1つずつ探っていくことが大切です。 本記事では、WordPressにログインできない6つの原因と解決方法をお届けします。問題の対処法を理解して、ストレスフリーなサイト...
編集権限がないアカウントでログインしている
ライターの方や、クライアントから運営を依頼されている人の場合、編集権限が付与されていないアカウントになります。
代表の管理者へ連絡して、編集権限を付与してもらうように問い合わせてみてください。管理者権限が付与されれば、HTMLの編集ができるようになります。
マルチサイトのサイトネットワーク管理者になっていない
マルチサイトを有効化したWordPressの場合、子サイトの管理者はHTMLの編集権限がありません。編集ができるのは「サイトネットワーク管理者」のみです。
子サイトの管理者の方は、サイトネットワーク管理者に連絡して権限を付与できるか問い合わせてみてください。
カスタマイズ性の高いテーマを導入するのもアリ
HTMLの編集作業は慣れてしまえば比較的かんたんにできます。
しかし、より効率的にWordPressを運用するなら、カスタマイズ性の高いテーマを利用するのがおすすめです。
- 構築したいサイトイメージに近いテーマを導入
- テーマのカスタマイズ機能でレイアウトとカラーを変更
- 微調整のみHTMLとCSSを編集
テーマ自体のカスタマイズ画面で完結するなら、HTMLを追記する必要はありません。ちなみにTCDでは用途に合わせて選べる様々なテーマをリリースしています。
HTMLやCSSの知識がない方でもカスタマイズ可能です。コーポレートサイト、EC、ブログ、飲食などジャンルごとに複数のテーマを用意しているので、ぜひTCDのテーマをチェックしてみてください。
まとめ
WordPressでHTMLを編集する方法を解説しました。
HTMLやCSSの編集はそこまで難しくありません。しかし、WordPressではPHPの編集スキルも必要なため、一般的なホームページとは趣旨が異なります。HTMLを編集する際は、必ずバックアップを取っておくことも忘れないでください。
また、カスタマイズ性の高いテーマを利用するのも1つの手段になります。まずは「どんなサイトにしたいのか」を明確にして、近いテーマを探してみましょう。
イメージ通りのサイトになるように、目的に合わせて最善の方法を選択してみてくださいね。
コメント