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ファイルです。
テーマ内に配置できるロゴの最大の高さを以下の手順で確認します。
- DreamweaverでMyThemeのフォルダのindex.phpを開く
- ライブビュー表示に切り替える
- ドキュメントツールバーのインスペクトモードボタンをクリック、インスペクトモードをオンにする
- ヘッダー領域のPrivacy Policyのリンクの下にある小さな雲のあたりにポインターを移動
- ヘッダーがハイライト表示されたらクリック
- CSSデザイナーパネルで.bannerArea .containerに設定されている値を確認
height 属性を見るとdivの高さ、すなわち作成するロゴの高さの最大値は83pxです。ロゴ画像を用意する場合はこれを超えないようにします。
ロゴ配置のためヘッダーの高さを確認
テーマにロゴを追加
さて、実際にロゴ画像をテーマに追加しましょう。以下の手順では、imagesフォルダののlogo.pngを使用しています。
- DreamweaverでMyThemeのフォルダ内のheader.phpを開く
- ドキュメントツールバーの「コード」ボタンを押してコードビューに切り替え
- 20行目あたりを探し、以下のコードを削除
<p class=”title”><a href=”<?php echo get_option(‘home’); ?>/”> <?php bloginfo(‘name’); ?> </a><br /> <span class=”description”> <?php bloginfo(‘description’); ?> </span></p>
- 削除した行にカーソルがあることを確認
- 「挿入」→「イメージ」→「イメージ}と選択(またはCtrl+Alt+I)、imagesフォルダの中からlogo.pngを選ぶ
- ドキュメントツールバーから「分割」ボタンをクリックし、コードとデザインを並べて表示し、ヘッダーにロゴが追加されたことを確認
ヘッダーにロゴ画像が追加された
ロゴにリンクを設定
次に、ロゴにリンクを設定して、クリックしたらサイトのホームページに移動するよう指定します。リンクには、静的なリンクと動的なリンクのいずれかが使用できます。静的なリンクはサイト内のURLが変わるとリンク切れになります。動的なリンクであれば、ページ名を変更してもリンク切れを起きません。その代わりに、データベース処理が増加します。
静的なリンクを作る手順は以下のとおりです。
- デザインビューでロゴ画像をクリック
- プロパティパネルのリンクフィールドに自分のURLを入力(例//www.yourblogdomain.com)
以下は、動的なリンクの場合です。
- コードビューで、挿入した画像の行の先頭にカーソルを移動
- <img src=”images/logo.png の直前に以下のコードを挿入
(コード内の get_option(‘home’); はホームページへのリンクを取得して、href属性の値を置き換えます)
<a href=”<?php echo get_option(‘home’);?>”>
- imgタグに border=”0″ を追加
- 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タグにサイトルートからの絶対パスを指定します。
- 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フォルダはテーマフォルダ直下にあるため、どのページからも正しく画像が参照されます。
追加したロゴの表示と確認
これまでの設定を確認します。
- ローカルWebサーバーが実行されていることを確認
- index.phpをクリック、Dreamweaverをライブニュー表示に
- Hello WorldをCtrl-click (Windows)またはCmd-click (Mac OS X)してテスト用の記事ページを表示
- ロゴ画像を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クラスを定義します。
- index.phpをライブビューで開き、ドキュメントツールバーのインスペクトボタンをクリック。インスペクトモードをオンに
- ポインターを”Hello world!”のリンクの上に移動しクリック。画面下のタグセレクターに<h2.posttitle>と表示されることを確認
- 分割ビュー表示に切り替え
- コードビュー側にstyle.cssを表示
- ファイルの最後に以下のCSSコードを追加
.posttitle { font-family: Georgia; color:#900; font-size: 24px; border-bottom: 1px solid #F2F2F2; padding-bottom: 5px; }
- プロパティパネルの「更新」を押して(またはF5)ライブビューの表示を更新
- リンクも同じ色で表示されるようstyle.cssの最後に以下の指定を追加(記事タイトルはリンクのため<a>タグにより指定された色が使われる)
.posttitle a { color:#900; }
- 記事タイトル上にポインターを移動したらたらテキストの色が変わるように以下のコードも追加
.posttitle a:hover { color:#555; }
これで下の図のように記事タイトルの色が赤くなります。
記事タイトルの色が変更された
ここではCSSファイルを直接編集してクラスを追加しましたが、DreamweaverではCSSデザイナーパネルを使ったスタイル設定も可能です。詳しい解説は「CSSデザイナーパネルで、コードを書かずに見た目を変更しよう」をご覧ください。
テーマにメニューを追加
メニューのあるテーマはとても便利なものです。WrodPressはページへのメニュー追加も簡単に行えます。
- サンプルテーマフォルダ内のfunctions.phpファイルをDreamweaverのコードビューで開く
- 最後の行の ?> の直前にカーソルを移動してEnterキーを押し空行を作成
- そこに以下のコードをコピー&ペースト
add_action( ‘init’, ‘register_my_menu’ ); function register_my_menu() { register_nav_menu( ‘primary-menu’, __( ‘Primary Menu’ ) ); } functions.phpにコードを追加したところ
上のコードは新しいメニューを登録して、WordPressに、このテーマがそれを使用することを伝えます。‘Primary Menu’ はメニューの名前です。管理画面などでこのメニューを指定するときに使います。‘primary-menu’ はコード内からの参照に使用されるスラッグです。
次に、登録したメニューを、テーマのヘッダーに表示するためのコードを追加します。
- Dreamweaverのコードビューでheader.phpファイルを開く
- 39行目あたりの “navigation goes here” と書かれた行を探し、その行を削除
- 代わりに以下のコードを追加する
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary-menu’ ) ); ?>
最終的なコードは以下のようになります。
<div class=”topnavigationgroup”> <?php wp_nav_menu( array( ‘theme_location’ => ‘primary-menu’ ) ); ?> </div>
これでヘッダー内にメニューの表示場所が指定されました。続いてメニューの項目を設定する手順を紹介します。
- ブラウザーに http://localhost/wp-admin/ を表示
- WordPressのログインページが表示されたらユーザー名とパスワードを入力してログイン
- 左のサイドバーの 「外観」をクリック、続いて「メニュー」をクリック
- メニューの名前に “Primary Menu” を指定し、「メニューを作成」をクリック
- 「ページ」のパネルの「全て表示」をクリック、リストされた個々のページを選択
- 「メニューに追加」をクリック
- 「メニューを保存」をクリック。 選択されたページのリストが “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で行う方法を紹介しました。次の記事では独自のホームページのつくり方を紹介します。