DreamweaverとWordPressを連携してテーマを編集する手順 第3回：WordPressテーマにスタイルを設定、ロゴとメニューを追加する

Dreamweaverl CC （2014年06月公開） 対応

この記事はアドビのDreamweaverを使ってWordPressのテーマを編集する手順を紹介するシリーズの第3回です。第1回と第2回では WordPressの編集に必要な知識と準備を紹介しました。今回は、テーマファイルを編集して、スタイルを変更したり、ロゴやメニューの追加を行います。

Dreamweaver CC の体験版をダウンロード サンプルファイルをダウンロード

この記事の作業を実施するためには、第2回で紹介した手順を完了している必要があります。

この記事は以下の項目から構成されます：

WordPressテーマにロゴを追加

多くのWordPressテーマでは、タイトルやタグラインに、管理画面から指定されたテキストが使われています。もしAdobe Photoshop, Adobe Illustrator, Adobe Fireworksで画像をつくった経験があるなら、WordPressページ用のロゴも用意できるでしょう。作成したロゴは以下の手順で WordPressテーマに追加します。

ロゴの高さを確認

ロゴを配置する先はMyThemeフォルダ内にあるheader.phpファイルです。

テーマ内に配置できるロゴの最大の高さを以下の手順で確認します。

  1. DreamweaverでMyThemeのフォルダのindex.phpを開く
  2. ライブビュー表示に切り替える
  3. ドキュメントツールバーのインスペクトモードボタンをクリック、インスペクトモードをオンにする
  4. ヘッダー領域のPrivacy Policyのリンクの下にある小さな雲のあたりにポインターを移動
  5. ヘッダーがハイライト表示されたらクリック
  6. CSSデザイナーパネルで.bannerArea .containerに設定されている値を確認

height 属性を見るとdivの高さ、すなわち作成するロゴの高さの最大値は83pxです。ロゴ画像を用意する場合はこれを超えないようにします。

ロゴ配置のためヘッダーの高さを確認

テーマにロゴを追加

さて、実際にロゴ画像をテーマに追加しましょう。以下の手順では、imagesフォルダののlogo.pngを使用しています。

  1. DreamweaverでMyThemeのフォルダ内のheader.phpを開く
  2. ドキュメントツールバーの「コード」ボタンを押してコードビューに切り替え
  3. 20行目あたりを探し、以下のコードを削除

<p class=”title”><a href=”<?php echo get_option(‘home’); ?>/”> <?php bloginfo(‘name’); ?> </a><br /> <span class=”description”> <?php bloginfo(‘description’); ?> </span></p>

  1. 削除した行にカーソルがあることを確認
  2. 「挿入」→「イメージ」→「イメージ｝と選択（またはCtrl+Alt+I）、imagesフォルダの中からlogo.pngを選ぶ
  3. ドキュメントツールバーから「分割」ボタンをクリックし、コードとデザインを並べて表示し、ヘッダーにロゴが追加されたことを確認

ヘッダーにロゴ画像が追加された

ロゴにリンクを設定

次に、ロゴにリンクを設定して、クリックしたらサイトのホームページに移動するよう指定します。リンクには、静的なリンクと動的なリンクのいずれかが使用できます。静的なリンクはサイト内のURLが変わるとリンク切れになります。動的なリンクであれば、ページ名を変更してもリンク切れを起きません。その代わりに、データベース処理が増加します。

静的なリンクを作る手順は以下のとおりです。

  1. デザインビューでロゴ画像をクリック
  2. プロパティパネルのリンクフィールドに自分のURLを入力（例//www.yourblogdomain.com）

以下は、動的なリンクの場合です。

  1. コードビューで、挿入した画像の行の先頭にカーソルを移動
  2. <img src=”images/logo.png の直前に以下のコードを挿入
    （コード内の get_option(‘home’); はホームページへのリンクを取得して、href属性の値を置き換えます）

<a href=”<?php echo get_option(‘home’);?>”>

  1. imgタグに border=”0″ を追加
  2. imgタグの後に </a> を追加

ここまでの作業で、コードは以下のようになります。

<a href=”<?php echo get_option(‘home’);?>”> <img src=”images/logo.png” width=”300″ height=”83″ alt=”my blog” border=”0″ /> </a>

最後に、ロゴ画像へのパスを、サイト構造に依存しない形に変更します。以下のようにimgタグにサイトルートからの絶対パスを指定します。

  1. imgタグのsrc属性を以下のように編集

<a href=”<?php echo get_option(‘home’);?>”> <img src=”<?php bloginfo(‘template_url’);?>/images/logo.png” width=”300″ height=”83″ alt=”my blog” border=”0″ /> </a> ヘッダーロゴ画像の新しいコード

WordPressは、bloginfo(‘template_url’); の箇所を、テーマファイルのフォルダへのパスに変換します。imagesフォルダはテーマフォルダ直下にあるため、どのページからも正しく画像が参照されます。

追加したロゴの表示と確認

これまでの設定を確認します。

  1. ローカルWebサーバーが実行されていることを確認
  2. index.phpをクリック、Dreamweaverをライブニュー表示に
  3. Hello WorldをCtrl-click (Windows)またはCmd-click (Mac OS X)してテスト用の記事ページを表示
  4. ロゴ画像をCtrl-click (Windows)またはCmd-click (Mac OS X)してホームページに戻ることを確認

テーマページに表示された新しいロゴ

記事タイトルのスタイル設定

記事のタイトルは読者の注意を引くスタイルにしたいものです。MyThemeサンプルのテーマで使われているフォント、色、間隔、ボーダーなどはスタイルシートで簡単に変更できます。ホームページ（index.php）とアーカイブページ（archive.php)の記事タイトルはH2タグにpagetitleクラスで指定されています。個別の記事ページ（single.phpとpage.php）の記事タイトルはSEOを考慮してH1タグになっています。こちらにもpagetitleクラスが使われています。

以下は、MyThemeのindex.phpに記述された記事タイトルを表示するコードです。

<h2 class=”posttitle”><a href=”<?php the_permalink(); ?>”> <?php the_title(); ?> </a></h2>

H1タグH2タグ両方にposttitleクラスが適用されるため、H1タグH2タグそれぞれの標準スタイルは活かしたまま、全てのページの記事タイトルを指定できます。記事タイトルのスタイルを変更するため、style.cssファイルにposttitleクラスを定義します。

  1. index.phpをライブビューで開き、ドキュメントツールバーのインスペクトボタンをクリック。インスペクトモードをオンに
  2. ポインターを”Hello world!”のリンクの上に移動しクリック。画面下のタグセレクターに<h2.posttitle>と表示されることを確認
  3. 分割ビュー表示に切り替え
  4. コードビュー側にstyle.cssを表示
  5. ファイルの最後に以下のCSSコードを追加

.posttitle { font-family: Georgia; color:#900; font-size: 24px; border-bottom: 1px solid #F2F2F2; padding-bottom: 5px; }

  1. プロパティパネルの「更新」を押して（またはF5）ライブビューの表示を更新
  2. リンクも同じ色で表示されるようstyle.cssの最後に以下の指定を追加（記事タイトルはリンクのため<a>タグにより指定された色が使われる）

.posttitle a { color:#900; }

  1. 記事タイトル上にポインターを移動したらたらテキストの色が変わるように以下のコードも追加

.posttitle a:hover { color:#555; }

これで下の図のように記事タイトルの色が赤くなります。

記事タイトルの色が変更された

ここではCSSファイルを直接編集してクラスを追加しましたが、DreamweaverではCSSデザイナーパネルを使ったスタイル設定も可能です。詳しい解説は「CSSデザイナーパネルで、コードを書かずに見た目を変更しよう」をご覧ください。

テーマにメニューを追加

メニューのあるテーマはとても便利なものです。WrodPressはページへのメニュー追加も簡単に行えます。

  1. サンプルテーマフォルダ内のfunctions.phpファイルをDreamweaverのコードビューで開く
  2. 最後の行の ?> の直前にカーソルを移動してEnterキーを押し空行を作成
  3. そこに以下のコードをコピー＆ペースト

add_action( ‘init’, ‘register_my_menu’ ); function register_my_menu() { register_nav_menu( ‘primary-menu’, __( ‘Primary Menu’ ) ); } functions.phpにコードを追加したところ

上のコードは新しいメニューを登録して、WordPressに、このテーマがそれを使用することを伝えます。‘Primary Menu’ はメニューの名前です。管理画面などでこのメニューを指定するときに使います。‘primary-menu’ はコード内からの参照に使用されるスラッグです。

次に、登録したメニューを、テーマのヘッダーに表示するためのコードを追加します。

  1. Dreamweaverのコードビューでheader.phpファイルを開く
  2. 39行目あたりの “navigation goes here” と書かれた行を探し、その行を削除
  3. 代わりに以下のコードを追加する

<?php wp_nav_menu( array( ‘theme_location’ => ‘primary-menu’ ) ); ?>

最終的なコードは以下のようになります。

<div class=”topnavigationgroup”> <?php wp_nav_menu( array( ‘theme_location’ => ‘primary-menu’ ) ); ?> </div>

これでヘッダー内にメニューの表示場所が指定されました。続いてメニューの項目を設定する手順を紹介します。

  1. ブラウザーに http://localhost/wp-admin/ を表示
  2. WordPressのログインページが表示されたらユーザー名とパスワードを入力してログイン
  3. 左のサイドバーの 「外観」をクリック、続いて「メニュー」をクリック
  4. メニューの名前に “Primary Menu” を指定し、「メニューを作成」をクリック
  5. 「ページ」のパネルの「全て表示」をクリック、リストされた個々のページを選択
  6. 「メニューに追加」をクリック
  7. 「メニューを保存」をクリック。 選択されたページのリストが “Primary Menu” の下に表示される（下図参照）

管理画面でメニューを編集

ドラッグ操作でメニューに表示されるページの順番を変更できます。変更後は「メニューを保存」ボタンを再びクリックします。

ページ以外の要素もメニューに追加できます。「カスタムリンク」の欄からは任意のURLとそのラベルを指定して、メニューに表示させることが可能です。

Dreamweaverに戻ってindex.phpのライブビューを更新してください。ホームページを含む全てのページにメニューが追加されたことが確認できます。

メニューをDreamweaverで確認

メニューにCSSスタイルを設定したくなったでしょうか。詳細はお任せしますが、最低2つのスタイルをstyle.cssに追加することになるでしょう。例えば、以下のようなコードです。

li.menu-item { list-style-type:none; float:left; } li.menu-item a { padding:4px 10px; text-decoration:none; display:block; }

メニューの表示は以下のようになります。

スタイル設定したメニューをDreamweaverで確認

この記事では、ロゴ追加、記事タイトルにスタイル設定、メニューの追加をDreamweaverで行う方法を紹介しました。次の記事では独自のホームページのつくり方を紹介します。