稼いでいるブログを公開します >>

WordPressのbodyタグはどこにある?場所と編集方法を解説!

WordPressのカスタマイズを行う際、頻繁に「bodyタグに貼り付けてください」という表現が出てきます。

ですが、WordPressを始めたばかりの初心者さんにとってはこれの意味自体が分かりませんし、操作に不安に感じてしまいますよね。

そこでこのページでは、bodyタグについて詳しく見ていきましょう。

アフィ
アフィ

手っ取り早くbodyタグにコードを貼り付けたい方は、プラグインを利用するのもありですよ。

Insert Headers and Footersの使い方|WordPressのヘッダー・フッタープラグイン
<body>~</body>内にコードを貼り付けてください。 <head>~</head>内にタグを貼り付けてください。 WordPressのカスタマイズを行っていくにあたって、このような...
今だけ限定!!

そもそもbodyタグとは

bodyタグを一言で説明すると、テキストや画像などが表示される部分のことです。

更に分かりやすく噛み砕いて説明しましょう。

ブログは大きく分けて以下の3つの要素から構成されます。

  • header(ヘッダー)
  • body(ボディ)
  • footer(フッター)

 

それぞれの名前から分かるとおり、これらの3つの要素は上・中・下の構成となっており、人間の体に例えられることが多いです。

  • header(ヘッダー)
    ⇒頭
  • body(ボディ)
    ⇒上半身
  • footer(フッター)
    ⇒下半身
アフィ
アフィ

人間の体に例えると分かりやすいですよね。

このbody(上半身部分)にコンテンツ(記事やサイドバーなど)が乗っており、ユーザーに表示されているようなイメージです。

bodyタグから見るHTMLの構造

すべて理解できなくてもいいので、下記の基本的なHTML構文を見てみてください。

<html>




<head>非表示部分</head>


<body>表示部分</body></html>

 

こちらのコードを見ていただくとbodyタグと一言で行っても、<body>と</body>の2種類のbodyタグがあることがご確認いただけるかと思います。

これはbodyタグに限った話ではなく、HTMLは開始タグである<○○>と、終了タグである</○○>で要素を挟み込むことで機能します。

いつもビジュアルエディターで記事を書いている人がほとんどかと思いますが、試しに投稿記事をテキストエディターで確認してみてください。

このようにHTMLコードが表示されますので、どのような動きをするのかイメージが掴みやすいはずです。

 

もう一度、最初のHTMLの基本構文を見てみましょう。

bodyタグをhtmlタグが挟み込んでいることがお分かりいただけるはずです。

<html>




<head>非表示部分</head>


<body>表示部分</body></html>

つまりこれは、投稿ページや固定ページで公開した記事内容も、bodyタグ内で読み込んで表示していることを表します。

WordPressのbodyタグはどこにある?

アフィ
アフィ

ここからはbodyタグの場所を見ていきましょう。

bodyの開始タグである<body>と、bodyの終了タグである</body>はWordPress上では別々の場所に存在します。

<body>の開始タグの場所

まずは、bodyの開始タグである<body>の場所を見ていきましょう。

ダッシュボードの外観の中にあるテーマエディターをクリックします。

テーマエディター

 

テーマヘッダー(header.php)をクリックします。

 

なお、お使いのテーマによっては親テーマの中にしかheader.phpが存在しない場合があります。(Cocoonテーマなど)

その場合は編集するテーマを選択:を親テーマに変更してもう一度探してみてください。

 

header.phpを開けたら、コード内をどこでも良いので一度クリックしControlFキーを押して検索窓を表示させます。(Macの場合はCommandFキー)

 

検索窓に<bodyと入力しEnterキーを押すと、bodyの開始タグが見つかります。

アフィ
アフィ

<body>ではなく<bodyで検索する理由は、テーマによっては上記画像のように<body>タグ内に別の要素を書き込んでいる場合があるためです。

</body>の終了タグの場所

次に、bodyの終了タグである</body>の場所を見ていきましょう。

ダッシュボードの外観の中にあるテーマエディターをクリックします。

テーマエディター

 

テーマフッター(footer.php)をクリックします。

 

なお、お使いのテーマによっては親テーマの中にしかfooter.phpが存在しない場合があります。(Cocoonテーマなど)

その場合は編集するテーマを選択:を親テーマに変更してもう一度探してみてください。

 

footer.phpを開けたら、コード内をどこでも良いので一度クリックしControlFキーを押して検索窓を表示させます。(Macの場合はCommandFキー)

 

検索窓に/body>と入力しEnterキーを押すと、bodyタグの終了タグが見つかります。

アフィ
アフィ

「bodyタグ内に貼り付けてください」という表現の場合、基本的にこの終了タグの1行手前に該当のコードを貼り付ければOKです。

 

ここまでの操作が不安な方は、Insert Headers and Footersというプラグインを利用するといいでしょう。

プラグインを使えばソースコードを編集することなくbodyにコードを挿入できますので、初心者の方でも安心安全に作業が進められます。

Insert Headers and Footersの使い方|WordPressのヘッダー・フッタープラグイン
<body>~</body>内にコードを貼り付けてください。 <head>~</head>内にタグを貼り付けてください。 WordPressのカスタマイズを行っていくにあたって、このような...

FTPから見るbodyタグの場所

こういったソースコードを触る場合には、先にもとのデータをバックアップファイルとしてPCに保存してから編集すると安全です。

そのため、FTPソフトでサーバーにアクセスした場合にはそれぞれのファイルの場所がどこにあるのかも覚えておくと良いでしょう。

アフィ
アフィ

FTPソフトの設定がお済みでない方は、今後のブログ運営にも必須ですしこの機会に済ませておくのがおすすめです。

WordPressのFTP設定のやり方全手順|FileZillaを使った接続方法は?
WordPressを使っていく上で、FTPソフトの設定は是非とも終わらせておきたいところ。 とは言え、FTPソフトの設定は意外と複雑でわかりにくいです。 そこでこのページでは、初めてFTPソフトを触る人でもスムーズに設定できるW...

 

FTPソフトでサーバーにアクセスしたら、ドメイン名>public.html>wp-content>themes>テーマ名にアクセスします。

その中にheader.phpfooter.phpが入っていますので、そのデータを編集前にPCにダウンロードしておくといいでしょう。

bodyに埋め込みしても表示されないときは

bodyタグ内を操作するということは、記事内やサイドバーなどに何かしらのコンテンツを埋め込みたいということでしょう。

bodyタグ内にコードを挿入したにもかかわらずそれらがうまく表示されない場合には、以下の対処法を試してみてください。

スーパーリロードする

余計なキャッシュがブラウザに残っている可能性があります。

Control+F5キーを押すとキャッシュを無視してページが読み込まれますので、それで表示されないか確認してみてください。

bodyタグ内にきちんと挿入されているか確認する

ソースコードは非常に複雑です。

ただしくbodyタグ内に設置したつもりでも、実はbodyタグ外に設置してしまっている可能性も考えられます。

もう一度、正しくbodyタグ内に設置されているか確認してみてください。

プラグインで設置してみる

直接.phpファイルを編集しなくとも、プラグインを使ってbodyタグ内にコードを挿入することができます。

うまく表示されないという人は、試しにプラグインを使ってコードを挿入してみてください。

Insert Headers and Footersの使い方|WordPressのヘッダー・フッタープラグイン
<body>~</body>内にコードを貼り付けてください。 <head>~</head>内にタグを貼り付けてください。 WordPressのカスタマイズを行っていくにあたって、このような...

実際に稼いでいるブログを見てみませんか?

現在、アフィが実際に収益を上げているブログメルマガ読者さんに無料で公開しています。

公開するブログは○○ジャンルの特化型ブログとなっており、記事数は30記事ほど、月間PV数はたったの50PVほどしかありません。

ですが、その特化型ブログからは毎月数万円の収益が発生しています。

アフィ
アフィ

どんなブログなのか興味がある人は、今すぐメルマガに登録してチェックしてみてください。

アフィ公式メルマガ

 

届かないというお問い合わせが増えています
『@maekawa-seo.com』のメールアドレスからメルマガを配信します。メールが届かない方は迷惑メールフォルダを確認するか、受信設定を見直してください。
アフィ

携帯ショップ店員など社会人として6年間勤務。
人に使われ続けることに疑問をもち、社会人6年目に輸入会社を設立し独立。
2017年からブログもスタートし、特化型ブログを運営。
時間にとらわれない働き方にシフトして妻との自由な時間を満喫中♪
自分の力で稼ぎ、人に雇われない働き方をしたい方はぜひ当ブログの情報を参考にしてみてください。

【仕事内容】

輸入会社経営
コンテンツ販売
ホームページ制作
ブログ収益化コンサルタント

【実績】

◯特化型ブログ◯
特化型ブログで累計収益1,000万達成

◯輸入販売◯
独立初年度から6,000万の売上達成

◯コンサル生実績(複数名)◯
月収10万円~44万円

メルマガ登録はこちら >>

詳しいプロフィールはこちら >>

アフィをフォローする
WordPressの使い方
アフィブログ

コメント