WordPressのカスタマイズ(2)ヘッダー - 初心者の簡単WordPressでホームページ作成方法


WordPressのカスタマイズ(2)ヘッダー

ここで言うヘッダーとは

  • WordPressのヘッダー
  • ヘッダーを部分で区分けすると下記のようになります。
    WordPressのヘッダー部分

SEOにも有力なh1の記述方法

  • h1は「大見出し」となり、そのページの一番大きな見出しです。
    閲覧の際にも、SEO的にもとても重要です。
    このh1の記述方法には、初心者の方でもできる方法に2通りあります。
    1.テーマの最上部にh1の表示がある場合
    2.テーマの最上部にh1の表示が無くて、ロゴ画像をh1にしている場合
    1.の場合は、そこに「WordPressのカスタマイズ(1)head」で使ったphpを貼り付けて自動表示させます。
    2.の場合は、ロゴ画像のaltに1.と同じphpを貼り付けてソースの中で自動表示させます。
    ※altは閲覧者には見えません。
    SEO的には、1.の方が効果が高いです。
    書き換えする前に、いつでも元に戻せるように、必ず元の記述をコピーして控えておいてください。
    ※Windowsでは「メモ帳」が標準装備されているので使えます。

1.の方法でh1を記述する方法

  • 元々テーマの最上部にh1テキストの表示が無い場合は、新たに設置することは初心者の方には難しいです。
    htmlとcssの知識が有ってできる方は、SEO的に有力ですから、設置してください。
  • 手順前ページ「WordPressのカスタマイズ(1)head」に説明している手順で、ヘッダー(header.php)を開いてください。
    WordPressの管理画面header
    このホームページの場合は下記の様になっています。
    h1
    <body>の下からがホームページに表示する箇所になります。
    その<body>の下あたりに<h1>~</h1>の記述があります。
    この<h1>~</h1>の間に、手順前ページ「WordPressのカスタマイズ(1)head」に説明しているtitleタグに貼り付けるphpと同じ下記のphpを貼り付けてください。

    つまり、titleと同じキャッチコピーを表示することになります。
    今ご覧いただいているこのページのtitleは「<title>WordPressのカスタマイズ(2)ヘッダー – 初心者の簡単WordPressでホームページ作成方法</title> 」となっており、このページの左最上部に表示されているh1テキストも「WordPressのカスタマイズ(2)ヘッダー – 初心者の簡単WordPressでホームページ作成方法」と同じになっていますね。
  • 最後に、h1テキストにトップページへのリンクを設定します。
    リンクを設定するとは、対象の文字列に<a href=http://www.ドメイン/>文字列</a>を記述することです。
    <a href=http://www.ドメイン/>はご自身のホームページのものにしてください。
    このホームページの場合は、<a href=http://www.rabbit-kumatori.com/>となるので、完成形は下記のようになっています。
    <h1><a href=http://www.rabbit-kumatori.com/><?php echo trim(wp_title(”, false)); if(wp_title(”, false)) { echo ‘ – ‘; } bloginfo(‘name’); ?></a></h1>

2.の方法でh1を記述する方法

  • <body>の下あたりに、ロゴ画像のソースがある筈です。
    このホームページの場合には、<img src=http://www.rabbit-kumatori.com/img/logo.png alt=”初心者が簡単にWordPressでホームページ作成する方法” >と記述されています。
    h1-2
    この、alt=”初心者が簡単にWordPressでホームページ作成する方法”の「”」から「”」の間に、上記のphpを貼り付けてください。
    そして、<h1>と</h1>で囲っておいてください。
    このホームページでは、1.の方法ですから行っていませんが、もしするとしたら下記のようになります。
    <h1><a href=http://www.rabbit-kumatori.com/><img src=http://www.rabbit-kumatori.com/img/logo.png alt=”<?php echo trim(wp_title(”, false)); if(wp_title(”, false)) { echo ‘ – ‘; } bloginfo(‘name’); ?>” ></a></h1>

ロゴ画像やその他の画像を入れ替える方法

  • 画像の作成は「ホームページ作成前に原稿を準備しよう」に書いている画像編集ソフト「JTrim」などが簡単に使えます。
  • ロゴ画像
    殆どのテーマにはサンプルのロゴ画像が配置されています。
    例:
    <img src=http://www.rabbit-kumatori.com/img/logo.jpg alt=”初心者が簡単にWordPressでホームページ作成する方法” ></a>
    ヘッダーheader.phpファイルで、この「http://www.rabbit-kumatori.com/img/logo.jpg」の部分を新たに作成したものに書き換えます。
    ※縦横のサイズがサンプル画像と異なる場合には、レイアウトが崩れることがありますので、同じサイズにしましょう。
    ※サンプル画像のサイズを測るには、一旦サンプル画像をコピーして測ってください。
    コピー方法は、「右クリック」→「コピー」や画像を選択して「Ctrl+c」などがあります。
  • 完成した画像をアップロードします。
    ※アップロード=手元のコンピュータから、サーバーに転送すること
    ※DreamWeaverやFFFTPなどのファイル転送機能のあるソフトが使える方は、下記の方法でなく直接にアップロードしますが、初心者の方でそういうソフトが使えない場合に下記の方法でアップロードしてください。
    左のメニューの「メディア」→「新規追加」→「マルチファイルアップローダー」をクリック
    upload01
    upload02
  • アップロードが済んだらその画像のURLを調べます。
    左のメニューから「メディア」→「ライブラリー」→アップロードした画像をクリック→「添付ファイルの詳細」の中にURL欄があります。
    upload03
    upload04

 


次は、→ メインイメージの作り方

 

WordPressのカスタマイズ(2)ヘッダー

「 WordPressのカスタマイズ(2)ヘッダー」のページ