<span class=”description”> <?php bloginfo(‘description’); ?> </span></p>
ヘッダーにロゴ画像が追加された
次に、ロゴにリンクを設定して、クリックしたらサイトのホームページに移動するよう指定します。リンクには、静的なリンクと動的なリンクのいずれかが使用できます。静的なリンクはサイト内のURLが変わるとリンク切れになります。動的なリンクであれば、ページ名を変更してもリンク切れを起きません。その代わりに、データベース処理が増加します。
静的なリンクを作る手順は以下のとおりです。
以下は、動的なリンクの場合です。
<a href=”<?php echo get_option(‘home’);?>”>
ここまでの作業で、コードは以下のようになります。
<a href=”<?php echo get_option(‘home’);?>”> <img src=”images/logo.png” width=”300″ height=”83″ alt=”my blog” border=”0″ /> </a>
最後に、ロゴ画像へのパスを、サイト構造に依存しない形に変更します。以下のようにimgタグにサイトルートからの絶対パスを指定します。
<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フォルダはテーマフォルダ直下にあるため、どのページからも正しく画像が参照されます。
これまでの設定を確認します。
テーマページに表示された新しいロゴ
記事のタイトルは読者の注意を引くスタイルにしたいものです。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クラスを定義します。
.posttitle { font-family: Georgia; color:#900; font-size: 24px; border-bottom: 1px solid #F2F2F2; padding-bottom: 5px; }
.posttitle a { color:#900; }
.posttitle a:hover { color:#555; }
これで下の図のように記事タイトルの色が赤くなります。
記事タイトルの色が変更された
ここではCSSファイルを直接編集してクラスを追加しましたが、DreamweaverではCSSデザイナーパネルを使ったスタイル設定も可能です。詳しい解説は「CSSデザイナーパネルで、コードを書かずに見た目を変更しよう」をご覧ください。
メニューのあるテーマはとても便利なものです。WrodPressはページへのメニュー追加も簡単に行えます。
add_action( ‘init’, ‘register_my_menu’ ); function register_my_menu() { register_nav_menu( ‘primary-menu’, __( ‘Primary Menu’ ) ); } functions.phpにコードを追加したところ
上のコードは新しいメニューを登録して、WordPressに、このテーマがそれを使用することを伝えます。‘Primary Menu’ はメニューの名前です。管理画面などでこのメニューを指定するときに使います。‘primary-menu’ はコード内からの参照に使用されるスラッグです。
次に、登録したメニューを、テーマのヘッダーに表示するためのコードを追加します。
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary-menu’ ) ); ?>
最終的なコードは以下のようになります。
<div class=”topnavigationgroup”> <?php wp_nav_menu( array( ‘theme_location’ => ‘primary-menu’ ) ); ?> </div>
これでヘッダー内にメニューの表示場所が指定されました。続いてメニューの項目を設定する手順を紹介します。
管理画面でメニューを編集
ドラッグ操作でメニューに表示されるページの順番を変更できます。変更後は「メニューを保存」ボタンを再びクリックします。
ページ以外の要素もメニューに追加できます。「カスタムリンク」の欄からは任意の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で行う方法を紹介しました。次の記事では独自のホームページのつくり方を紹介します。