Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressサイトの編集方法(アルティメットガイド)

WordPressには、サイトの外観や機能を変更する方法がたくさんあります。この柔軟性こそがWordPressの素晴らしいところですが、同時に混乱を招くこともあります。

ブロックエディターを使うべきか?ページビルダープラグインはどうですか?それともカスタマイザーがいいのか?答えは、あなたが何を達成したいのか、そして技術に対する快適さのレベル次第です。

私たちは何年もWordPressを使い、さまざまな状況でどの方法が最も効果的かについて多くを学んできました。また、WordPressのビルトイン機能は素晴らしいものですが、特定のプラグインを使用することで、より創造的な自由を得ることができることもわかりました。

このガイドでは、テーマのカスタマイズからページや投稿の編集まで、WordPressサイトを編集する最も一般的な方法を説明します。

How to Edit a WordPress Website (Ultimate Guide)

WordPressサイトの編集方法の概要

オープンソースのコンテンツ管理システムであるWordPressは、サイトを構築・編集するための多くの機能を備えています。

最近WordPressをインストールしたのであれば、Gutenbergに出会ったかもしれない。GutenbergはWordPressのドラッグ&ドロップでページや投稿をカスタマイズできるブロックエディターだ。この機能はとても簡単で初心者にも優しい。

The Gutenberg block editor interface

フルサイトエディターもご覧になったことがあるかもしれない。

これはGutenbergの拡張機能で、ブロックエディターを使ってブロックベースのWordPressテーマをカスタマイズできる。

The WordPress Full Site Editor

とはいえ、クラシックな非ブロックWordPressテーマを使用している場合、FSEは利用できません。代わりに、WordPressテーマカスタマイザーを使用する必要があります。

この機能にはドラッグ・アンド・ドロップ機能が付いていないので、ユーザーフレンドリーではない。左側のパネルにあるいくつかのメニュー設定を使ってテーマを編集する必要がある。

Using the WordPress Theme Customizer to edit a transportation and logistics website

WordPressのビルトイン機能では利用できないカスタマイズオプションが必要な場合は、SeedProdのようなページビルダープラグインをインストールすることができます。

WordPress初心者の方には、通常こちらをおすすめしています。Gutenbergと同様、SeedProdにもドラッグ&ドロップ機能がある。しかし、アニメーション効果やページを構築するためのコンテンツブロックオプションなど、よりクリエイティブな方法を提供しています。

Editing the online coaching business theme in SeedProd

WordPressユーザーの中には、Classicエディターを使っている人もいます。これはWordPressのレガシーなページ・投稿エディターで、ドキュメントエディターのように見えます。

この機能は、WordPressの最新バージョンでは初期設定では有効化されていません。しかし、この機能に慣れ親しんでいる人や、現在のサイトデザインを維持したい人の中には、まだこの機能を使用している人もいる。

The Classic Editor Interface

この投稿では、ご紹介したエディターを使ってWordPressサイトのさまざまな部分を編集する方法をご紹介します。

また、WordPressがすでにインストールされ、セットアップされていることを前提とします。そうでない場合は、WordPressホスティングサービスドメイン名WordPressのインストールが必要です。

このチュートリアルの特定のセクションにスキップしたいですか?以下のクイックリンクをご利用ください:

WordPressテーマの編集方法

WordPressをインストールしたら、まず最初にすべきことのひとつは、テーマを選んでカスタマイズすることです。そのための3つの方法をご紹介します。

フルサイトエディターによるブロックテーマのカスタマイズ

フルサイト編集はWordPress 5.9で導入されました。ブロックエディターを使ってWordPressブロックテーマを簡単に編集できるように設計されています。

私たちの経験では、フルサイトエディターは初心者のテーマカスタマイゼーションを大幅に簡素化しました。

WordPressの管理エリアに外観 ” エディターが 表示されていることが、ブロックWordPressテーマを使っていることの一つの証拠です。もし外観 ” カスタマイズが表示されていれば、テーマカスタマイザーを使う必要はありません。

Clicking Appearance Editor in the WordPress admin

フルサイトエディターを使用するには、ブロックテーマをインストールする必要があります。フルサイト編集に最適なブロックWordPressテーマのリストで、たくさんのテーマを見つけることができます。

無料のオプションを見つけたい場合は、外観 ” テーマにアクセスしてください。そして「新規テーマを追加」をクリックする。

Adding a new WordPress theme in the admin area

その後、「ブロックテーマ」タブに切り替えるだけだ。

すると、画面に何十ものブロックテーマが表示されます。インストール方法については、WordPressテーマのインストール方法のステップバイステップガイドをご覧ください。

Finding WordPress block themes in the admin area

テーマをインストーラしたら、外観 ” エディター に行ってください。

フルサイト編集ダッシュボードが表示されます。テーマのナビゲーションメニュー、スタイル、ページ、テンプレート、パターンを編集することができます。

これらのテーマについてはチュートリアルの残りの部分で説明しますが、ここではテーマのスタイルを変更する方法を簡単に紹介します。

これを行うには、「スタイル」メニューをクリックします。

Clicking Styles in the Full Site Editing interface

テーマが提供する配色と タイポグラフィの組み合わせのリストが表示されます。

スタイルをクリックするたびに、インターフェースがプレビューを表示します。

Choosing a theme style in the Full Site Editor

選択に満足したら、「保存」をクリックするだけです。また、カスタムスタイルを作成することもできます。

さらに詳しくフルサイトエディターの使い方を知りたい方は、初心者向けWordPressフルサイト編集ガイドをご覧ください。

テーマカスタマイザーでクラシックテーマをカスタマイズする

クラシックWordPressテーマを使用している場合は、テーマカスタマイザーで編集します。WordPressの管理エリアから 外観 ” カスタマイザーにアクセスしてください。

Opening the WordPress theme customizer

さて、ここでカスタマイズできる内容は、使用しているテーマによって異なる。

例えば、Astraテーマがあれば、サイト全体のスタイル、ヘッダー、フッター、サイドバー、ページ、ロゴなどをカスタマイズできる。

そのため、テーマのドキュメンテーションをご覧ください。

What the Theme Customizer looks like for Astra theme

テーマカスタマイザーに関するガイドでは、より詳細な情報を提供しています。

変更が完了したら、さまざまな画面解像度でサイトをプレビューできます。その後、上部にある’公開する’ボタンをクリックすると、編集した内容を公開することができます。

Publishing a classic WordPress theme in the Theme Customizer

テーマカスタマイザーはこのリストにある他の選択肢よりも柔軟性に欠けることがわかりました。もしそう思われるのであれば、次の方法をお勧めします。

ページビルダー・プラグインでWordPressテーマをカスタマイズする

WordPressにビルトインされているデザイン機能に満足していない多くのWordPressユーザーは、サイトを編集するためにページビルダーを使用しています。これはWordPressのプラグインで、サイトのさまざまな部分をデザインするために初期設定のエディターを置き換えることができます。

ほとんどのページビルダーにはドラッグ&ドロップ機能がついているので、ブロックエディターと同じように簡単に使えます。さらに、あなたのサイトをパーソナライズするために、より多くのページブロックとテンプレートが付属しています。

数多くのページビルダーをテストした結果、SeedProdが最も優れていると一貫して推奨してきました。eコマースや宿泊施設からサービスまで、様々なカテゴリーに対応した300以上のテンプレートが用意されています。

さらに詳しく知りたい方は、SeedProdの詳細レビューをご覧ください。

SeedProd Website and Theme Builder

注: SeedProdには無料版がありますが、テーマ・ビルダーにアクセスするにはProプランにアップグレードすることをお勧めします。このチュートリアルではこれを使用します。

SeedProdを使用するには、まずWordPressプラグインをインストールする必要があります。その後、SeedProd ” 設定 に進み、Proプランのライセンスを有効化します。ライセンスキーを挿入し、’Verify Key’をクリックするだけで、このステップが完了します。

Verifying SeedProd Pro's license key

次に、SeedProd ” Theme Builderに切り替えてください。

テーマテンプレートキット」をクリックするだけで、テーマオプションが表示されます。

Accessing SeedProd's Theme Template Kits

ご覧のように、オンラインショップからサービスサイトまで、多くのテーマテンプレートキットが用意されています。フィルターやソート設定を自由に使って、あなたのニーズに合ったものを見つけてください。

選択したテーマテンプレートにマウスオーバーし、オレンジ色のチェックマークボタンをクリックすると、そのテーマが使用できるようになります。

Choosing a theme template kit in SeedProd

あとは、テーマ・ビルダーのページに戻って、編集したいテーマ・テンプレートを選択するだけだ。

デモのために、SeedProdテーマテンプレートのスタイルを編集する方法をお見せします。これを行うには、’Global CSS’テーマテンプレートを見つけ、マウスオーバーし、’Edit Design’をクリックします。

Editing a theme template kit's Global CSS in SeedProd

あなたは今、SeedProdページビルダーの中にいて、テーマテンプレートのスタイルをカスタマイズすることができます。ここでは、サイトの色、フォント、背景、ボタン、フォーム、レイアウトを変更できます。

テーマのデフォルト・フォントを変更する方法を見てみましょう。これを行うには、「フォント」メニューを開きます。そして、SeedProdの多くのフォントと色のオプションの中から、見出しと本文に使用するものを選んでください。

あなたが加えた変更はすべて、右側のプレビューに自動的に表示されます。

Changing a SeedProd theme template kit font in the Global CSS theme template

スタイルに満足したら、’Save’をクリックし、これらの変更を正式なものにします。

その後、SeedProd ” Theme Builderに 戻り、右上にある「SeedProdテーマを有効化」のトグルをオンにします。

Enabling the SeedProd theme template kit in WordPress

SeedProdでWordPressテーマを編集する方法については、カスタマイザーを簡単に作成する方法をご覧ください。

WordPressのページや投稿を編集する方法

WordPressを最新バージョンに更新した場合、ページや投稿の編集にGutenbergブロックエディターを使用することがほとんどでしょう。

ページ ” 新規 ページ追加 で新規ページを作成できます。自動的に真っ白なページが作成され、ブロックエディターが表示されます。

一方、ホームページやブログページのような既存のページを編集したい場合は、「ページ ” すべてのページ」を開きます。編集したいページにマウスオーバーし、「編集」をクリックします。

Clicking the Edit button to edit an existing WordPress page

また、クイック編集機能もあります。

これにより、ページのタイトル、URLスラッグ、最終更新日を変更することができます。

Clicking the Quick Edit button in the WordPress Pages page

クイック編集機能でいろいろなことができる。

例えば、ページにパスワードを設定する、非公開にする、親ページとして割り当てる、ページテンプレートを変更する、コメントすることを許可する/しない、ページの状態を変更するなどがあります。

The Quick Edit feature for WordPress pages

新しい投稿を作成するには、投稿 ” 新しい 投稿を追加 にアクセスして新しい空白の投稿を作成し、ブロックエディターを使って編集するだけです。

以前と同じように、選択した投稿にマウスオーバーして「編集」をクリックすれば、既存のWordPressブログ投稿を編集できる。

The WordPress Posts interface in the WordPress admin area

投稿のクイック編集機能も同様だが、若干の違いがある。

ここでは、タグの追加、ピンバックの許可/不許可、投稿の先頭固定表示(サイトでのおすすめ表示)もできます。

The Quick Edit feature for WordPress blog posts

WordPressのページや投稿を開いたら、ブロックエディターでできることはたくさんあります。

通常、左上にある「+」ブロック追加ボタンから始めます。

ここにはWordPressや使用しているプラグインから利用可能なすべてのブロックがあります。

Opening the block inserter library in WordPress

その後、ブロックをメインの編集エリアにドラッグ・アンド・ドロップすることができる。

その後、ブロックのツールバーと設定サイドバーを使って、ブロックのスタイル、寸法、パディング、マージン、スペーシングなどを設定できます。

The block settings sidebar in WordPress

WordPressプラグインをインストールしている場合、編集インターフェースの下にいくつかの設定が表示されることがあります。

例えば、All In One SEOプラグインでは、ページや投稿のメタタイトルと説明を検索エンジン用に最適化できるセクションが表示されます。

The AIOSEO settings in the WordPress block editor

投稿やページの編集についてさらに詳しく学べるガイドがたくさんありますので、ぜひご覧ください:

クラシックエディターでWordPressのページや投稿を編集する方法

私たちは一般的にブロックエディターの利用を推奨していますが、特定の作業においてはクラシックエディターのシンプルさを好むユーザーもいることを理解しています。例えば、長文のコンテンツを書いたり、ブロックインターフェースに気を取られずに投稿を素早く編集したりする場合などです。

クラシックエディターを使用したい場合は、有効化する必要があります。Gutenbergを無効化し、クラシックエディターを有効化する方法については、こちらの投稿をご覧ください。

その後、投稿新しい投稿を追加、またはページ新しいページを追加で新しい投稿またはページを作成すれば、クラシックエディターが画面に表示されます。

The WordPress classic editor

ブロックエディターとは異なり、コンテンツをページや投稿に挿入するためにブロックを追加することはありません。代わりに、テキストを入力し、編集パネルの上部にあるコントロールを使ってフォーマットし、「メディアを追加」ボタンをクリックしてコンテンツにメディアファイルを追加することだけができます。

編集インターフェースの下部と側面には、ページや投稿を公開したり、ページや投稿のカテゴリーやタグを設定したり、おすすめ投稿画像をアップロードしたりする設定がある。

また、ビジュアル編集モードとテキスト編集モードを切り替えることもできます。つ目のエディターでは、投稿やページのHTMLコードを修正することができます。

The text editing mode in the WordPress classic editor

WordPressのページをページビルダーで編集する方法

すでにSeedProdのようなページビルダーを使ってテーマを編集しているのであれば、それを使ってページを編集することもできます。こうすることで、すべてのページでデザインの一貫性を保つことができます。

新規ページを作成し、ブロックエディターを開く必要があります。SeedProdが有効化した場合、上部に’Edit with SeedProd’というボタンが表示されます。それをクリックしてください。

既存のページでも可能です。ただし、コンテンツは引き継がれませんので、一からページを作成する必要があります。

Clicking the Edit with SeedProd button in the WordPress block editor

ページビルダーで、SeedProdテーマのヘッダーとフッターが追加されていることがわかります。あとはすべて、ページを作り始めるだけです。

まず、ページで使用する8つのレイアウトから1つを選ぶ。

Choosing a layout for the section in a SeedProd theme template

左側には、すべてのブロックとセクションがあり、右側のテンプレートプレビューにドラッグ&ドロップすることができます。

これらを使ってページにコンテンツを挿入することができる。

SeedProd's block library

ブロックやセクションをクリックすると、左側にその要素をカスタマイズするための設定が表示されます。

下のスクリーンショットでは、テキストブロックをクリックすると、ブロックの設定が外観表示されます。テキストをカスタマイズしたり、ダイナミック・コンテンツを挿入したり、HTMLを編集したり、配置を変更したりすることができます。

Customizing SeedProd's text block settings

ページの編集が終わったら、「保存」をクリックして変更を反映させることをお忘れなく。

詳しくは、WordPressでカスタムページを作成する方法をご覧ください。

ゼロからカスタム・ランディングページを作成したい場合は、SeedProdでも可能です。必要なことはすべて、SeedProd ” ランディングページ にアクセスすることです。そして、’+新規ランディングページを追加’ボタンをクリックします。

Create a new landing page in SeedProd

詳しくは、カスタムランディングページの作成方法についてのチュートリアルをご覧ください。

代替 Thrive Architectは魅力的なカスタムページをデザインするためのもう一つの素晴らしいページビルダーオプションです。さらに、ページだけでなく投稿も編集する権限がありません。

詳しくはThrive Architectのレビューをご覧ください。

WordPressのヘッダー、フッター、サイドバー、その他テーマテンプレートの一部を編集することもできます。

これらは、メインページや投稿コンテンツの一部ではないサイト上のセクションです。しかし、追加情報や役立つナビゲーションを提供するためには不可欠です。

これらのセクションをどのように編集できるかは、使用しているテーマによって異なるので、それぞれの設定を見ていこう。

ブロックテーマのヘッダー、フッター、その他のテンプレートパーツを編集する方法

ブロックテーマを使っている場合は、フルサイトエディターを使ってテーマのヘッダーとフッターを編集することができます。

フルサイトエディターでは、ヘッダーとフッターはテンプレートパーツとみなされます。これらはWordPressパターン(再利用可能なブロックのセット)としても知られており、サイト全体に表示されます。

テンプレート部分の他の例としては、コメント欄や投稿メタ情報などがある。

例として、WordPressのヘッダーを編集する方法を紹介しますが、他のテンプレート部分でもこの手順を繰り返すことができます。

まず、外観 “ エディターを 開きます。フルサイトエディターに入ったら、「パターン」をクリックするだけです。

Clicking the Patterns menu in the Full Site Editor

WordPressテーマが提供するパターンのリストが表示されます。

テンプレートパーツのセクションまでスクロールダウンしてください。そして、「ヘッダー」を選択し、ヘッダーテンプレートパーツをクリックします。

Opening the header template part in the WordPress Full Site Editor

次に、ヘッダーテキストの隣にある鉛筆ボタンをクリックする必要があります。

これでブロックエディターが開きます。

Clicking the pencil button to edit the header using the Full Site Editor

ブロックエディターはページや投稿と同じようにテンプレートパーツでも機能します。様々なブロックをヘッダーに追加し、ブロックを設定し、完了したら変更を更新できます。

ヘッダーには通常、サイトロゴ(またはファビコン)が含まれるので、ここにも自由に追加してください。

Adding the Site Logo block to the header in the Full Site Editor

ヘッダーの見た目を完全に変えたいが、どこから手をつけていいかわからない場合は、左上にある「+」追加ブロックボタンをクリックしてください。

次に、「パターン」タブに移動し、「ヘッダー」をクリックします。そこにはすぐに使えるヘッダーレイアウトがたくさんあります。

Finding WordPress header patterns in the Full Site Editor

詳しくは、WordPressヘッダーのカスタマイズ方法をご覧ください。

ヘッダーの変更が終わったら、’保存’をクリックします。ヘッダーは同期されたテンプレートパーツなので、ここで行った変更はすべて、ヘッダーを使用するすべてのページに適用されます。

さて、既存のものを編集するのではなく、新しいヘッダーやその他のテンプレートパーツを作成したい場合は、「パターン」ページに戻ることができます。その後、「+パターンを作成」ボタンをクリックし、「テンプレートパーツを作成」を選択します。

Creating a new template part in the Full Site Editor

ポップアップで、テンプレート・パーツに名前を付け、テンプレート・パーツのタイプを選択します。

そして、『作成』をクリックします。するとブロックエディターが表示され、通常通りテンプレート部分を編集することができます。

The Create template part popup in the WordPress Full Site Editor

詳しくは、WordPressフルサイト編集の完全ガイドをご覧ください。

クラシックテーマでWordPressのヘッダー、フッター、その他のウィジェット対応エリアを編集する方法

クラシックテーマでは、WordPressウィジェットは基本的に、ヘッダー、フッター、サイドバーなどのウィジェット対応エリアに追加できるブロックです。

クラシックWordPressテーマには、それぞれ異なるウィジェット対応エリアがあります。サイドバーがある場合もあれば、ない場合もあります。そのため、詳細についてはテーマのドキュメンテーションを確認してください。

ウィジェットを使用するには、外観 ” ウィジェットに移動する必要があります。ここでは、利用可能なウィジェット対応エリアにブロックを追加、設定、削除することができます。

Adding the FlipBox widget to a sidebar or similar section

ウィジェットの詳細については、WordPressでウィジェットを追加して使用する方法の投稿をご覧ください。

また、ウィジェットとブロックの違いについてのガイドもご覧ください。

WordPressのヘッダー、フッター、その他のテンプレートパーツをページビルダーで編集する方法

ページビルダーを使用する利点の1つは、ヘッダー、フッター、サイドバー、その他のテーマの部分をカスタマイズするオプションが増えることです。

SeedProdを使用している場合、SeedProd ” Theme Builderに行くことができます。ここでは、あなたが以前からテーマテンプレートキットをインストールしていると仮定します。

キットには通常、様々なテーマテンプレートが含まれています。これは404や 個別投稿のようなビルトインページテンプレートかもしれませんし、ヘッダー、フッター、価格テーブルなどのようなページの一部かもしれません。

テーマテンプレートにマウスオーバーしてください。そして、『デザインを編集する』をクリックする。

Editing the header theme template in SeedProd

これで、ページと同じようにヘッダーを編集できる。

ソーシャルメディアへのリンクをここに追加したいとしましょう。青い枠線が表示されるまでヘッダーの上にマウスオーバーし、「+行を追加」ボタンをクリックします。次に、行のレイアウトを選択します。

この例では、ヘッダーに画像、メニュー、ソーシャルメディアリンクが収まるように、もう1カラム追加したい。つまり、1行に3カラムが必要になる。

Choosing a row layout in SeedProd

そして、一番上の行から新しい行にブロックをドラッグ・アンド・ドロップすることができる。

その後、一番上の行を削除し、新しい行が新しいヘッダーになるようにします。

Deleting a previous row in a SeedProd section

次に、左側のパネルでソーシャル・プロフィールのブロックを探します。

右のカラムにドラッグすれば完了。

Adding the Social Profiles block in the header in SeedProd

テンプレートパーツの編集について詳しくは、WordPressチュートリアルをご覧ください:

WordPressでナビゲーションメニューを編集する方法

ナビゲーションメニューがあれば、訪問者はサイト内で迷うことなく、すべてのコンテンツを簡単に探索することができます。そのため、重要なページやその他の関連情報へのリンクを表示するメニューをデザインすることが重要です。

ブロックWordPressテーマを使用している場合、フルサイトエディターページから「ナビゲーション」メニューを選択することができます。

Selecting Navigation in WordPress Full Site Editing

WordPressのカスタムナビゲーションメニューの追加に関する投稿で、残りの手順を説明することができます。

クラシックWordPressテーマを使用している場合、外観 ” メニューに行くことができます。これは、メニューにページ/投稿やリンクを追加、アレンジ、削除するための専用ページです。

How to add a WordPress navigation menu to your site or blog

ステップバイステップの手順については、WordPressでナビゲーションメニューを追加する方法についての初心者ガイドをご覧ください。

SeedProdのようなページビルダーを使用している場合、ナビゲーションメニュー(Nav Menuブロック)がヘッダーテーマテンプレートに埋め込まれている可能性があります。

ナブ・メニュー・ブロックにはすでにすべてのページが含まれていますが、新しい項目を追加することもできます。

まず、WordPressダッシュボードからSeedProd “ Theme Builderにアクセスします。そして、「ヘッダー」テーマテンプレートを見つけ、「デザインを編集」をクリックします。

Editing the header theme template in SeedProd

メニューのように見えるブロックにマウスオーバーしてください。それが「Nav Menu」ブロックになるはずです。

その後、左のパネルを下にスクロールし、「+新規項目を追加」をクリックする。

その後、アンカーテキストをカスタマイズし、URLを入力し、新しいウィンドウで開くようにし、nofollowに設定することができます。

Adding new menu items in SeedProd

下の方では、リンクのフォントサイズ、間隔、区切り、配置を変更することができます。

変更を有効にするには、「保存」をクリックするのを忘れないでください。

Configuring the Nav Menu block in SeedProd

WordPressサイトをコードで編集する方法

コードの扱いに慣れているのであれば、カスタム・コード・スニペットを使ってWordPressサイトを編集することもできます。とはいえ、この方法をお勧めするのは、サイトを壊さないための正しい技術的ノウハウがある場合だけです。

WordPressサイトをコードで編集する方法のひとつに、CSSを追加する方法があります。CSSは、フロントエンドでのHTMLの見え方を変更できるスタイルシートです。

クラシックテーマのユーザーは、外観 “ カスタマイズに行き、テーマカスタマイザーで「追加CSS」フィールドを見つけることができます。

ここでは、色やフォントなど、さまざまなHTML要素をスタイル設定するためのCSSコードを挿入することができます。

テーマのビルトインオプションがあなたのニーズに十分でない場合、これは便利かもしれない。

Adding custom CSS in WordPress

ブロックテーマのユーザーに関しては、フルサイトエディター内でカスタムCSSを追加することはできません。

代わりに、以下のURLにアクセスしてテーマ・カスタマイザーを開き、Additional CSSフィールドを見つけてください。ドメイン名は本当に〜してもよいですか?

https://example.com/wp-admin/customize.php

詳しくは、WordPressのテーマカスタマイザーが見つからない場合の対処方法をご覧ください。

CSSを追加するもう一つの方法は、CSS Heroを使うことだ。このプラグインを使えば、初心者でも簡単にWordPressテーマにカスタマイザーCSSを追加できる。

CSS Heroのレビューとチュートリアルをご覧ください:

WordPressテーマファイルの編集方法

チュートリアルによっては、ビルトインのテーマ機能で可能な範囲を超えて変更を加えるために、WordPress テーマファイルを編集する必要がある場合があります。とはいえ、テーマファイルを直接編集することをお勧めするのは、それがあなたの目標を達成するための唯一の方法である場合だけです。

この場合、私たちはこう勧める:

  • まず子テーマを作成する。これはWordPressテーマのコピーのようなもので、いくつかのコーディングで安全にカスタマイザーすることができる。
  • サイトのバックアップ。万が一エラーが発生した場合に、サイトを以前のバージョンに復元できるようにするための対策です。

WordPressテーマファイルを編集するには、バックエンドからWordPressファイルディレクトリに移動する必要があります。これを行うには、ホスティングサービスのファイルマネージャーを開くか、FTPクライアントでサイトに接続する必要があります。

Bluehostを使用している場合は、ダッシュボードに移動し、 ‘ウェブサイト’タブを開くことができます。その後、テーマファイルを開きたいサイトの「設定」をクリックします。

Opening Bluehost's website settings

ここで、「クイックリンク」セクションまでスクロールダウンするだけだ。

次に、「ファイルマネージャー」をクリックします。ルートフォルダーがどこにあるか本当に〜してもよいですか?あなたは、そのパスを確認するために ‘ドキュメントルート’機能をチェックすることができます。

Opening Bluehost's file manager

ファイルマネージャーに入ったら、サイトのルートフォルダー(通常はpublic_htmlという名前)に移動します。

次に、/wp-content/themesに移動し、現在のテーマフォルダーを見つけてください。

An example of what the WordPress theme files look like in the Bluehost file manager

その後、WordPressテーマファイルがすべて表示されますので、テキストエディターを使って編集してください。

WordPressのテーマファイルを編集することでできることがいくつかあります:

WordPressにカスタムコードを安全に挿入する方法

WordPressで新しいカスタマイザーコードを追加したい場合は、WPCodeを使用することをお勧めします。私たちのテストでは、WPCodeはテーマファイルを直接編集するよりも安全でユーザーフレンドリーな代替手段であることが証明されています。

WPCode - Best WordPress Code Snippets Plugin

このプラグインを使えば、誤ってサイトを壊してしまう心配はない。WPCodeは、コードにエラーがある場合、それを知らせて無効化します。さらに、サイトにカスタマイザーのコンテンツを挿入するためのPHPショートコードを作成することができます。

WPBeginnerソリューションセンターのWPCodeレビューをご覧ください。

初心者に最適なWordPressサイト編集方法とは?

初心者の方には、WordPressサイトを編集するためにSeedProdのようなページビルダー・プラグインをインストールすることを常にお勧めします。その理由は、ブロックエディターと同じくらい使いやすいのに、サイトのデザインをよりコントロールできるからです。

プラグインを使いたくないのであれば、次善の策はフルサイトエディターを備えたブロックテーマだ。WordPressは定数でGutenbergプロジェクトに取り組んでいるため、この機能はまだ完全には開発されていない。しかし現時点では、かなりユーザーフレンドリーだ。

テーマカスタマイザーはドラッグ&ドロップ機能がないため、フルサイトエディターほど柔軟ではありません。そのため、クラシックテーマのユーザーには、ユーザーエクスペリエンスを向上させるためにSeedProdをインストールすることをお勧めします。

コーディングに関しては、エラーを避けるために子テーマとサイトのバックアップを作成している場合にのみお勧めします。しかし、WPCodeプラグインを使用すれば、WordPressサイトを編集するためにカスタムコードを追加しても、はるかに安全で、エラーが発生したり、サイトが壊れたりすることはありません。

この投稿がWordPressサイトの編集方法を学ぶのにお役に立てば幸いです。また、専門家が選ぶ最高のWordPressテーマビルダーやチェックすべき優れたWordPressサイト例のリストもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

3件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Peter Iriogbe

    I have noticed that all the screenshots used in this post are desktop sizes. This shows that the user leveraged his laptop computer to do the edition. Does this mean one can not use a mobile phone to edit? Or can some use it to edit? Because not all WordPress website owners have a laptop or desktop computer? What do you have to say about this?

    • WPBeginner Support

      It is not required to use a laptop to edit a WordPress site but it is normally recommended as you can test a mobile view on a laptop/desktop but testing a laptop/desktop view on mobile is very difficult.

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。