「footer.php」への書き込み
ヘッダーと同じようにfooter.phpにもコードを書き込んでみます。
書き込むコードは以下になります。
[php]
<!-- フッター -->
<div id="footer">
<p>Copyright © <?php bloginfo('name'); ?>, All rights reserved.</p>
</div>
</div>
</body>
</html>
[/php]
１、管理画面＞メニュー＞外観を選択
２、テーマの編集を選択
３、画面右端 フッター（footer.php）を選択
４、エディタ切り替えの確認
５、コードをコピーしてエディタへ貼り付け
６、ファイルを更新をクリック
７、ファイルの編集に成功しましたを確認
以上がフッターへの記述になります。次にこれをhoom.phpに呼び出すコードを記載してみます。
hoom.phpへ記述する
home.phpへ書くコードは以下
[php]
<?php get_footer(); ?>
[/php]
この1行だけです。それではコピーして貼り付けてみましょう。
１、home.phpを選択
２、エディタ切り替えの確認
３、コードの貼り付け
４、ファイルを更新
５、ファイルの更新に成功しましたを確認
６、テーマ名をクリック
「footer.php」に記述した「Copyright©wordpress,All rights reserved.」の文字が表示されました。
フッターへ記載したのは「Copyright © ＜?php bloginfo('name'); ?＞, All rights reserved.」でした。
これはCopyright© と ,All rights reserved.の間に「サイト名」を表示させる命令文が入っているためにこのような表示になりました。このやり方で、今はまだTOPページだけですが、新しいページが増えた場合でも同じヘッダーとフッターの表示が可能になります。また、これを応用することで、記事のタイトルや記事の内容、画像や日付、デザインなど1回の記述で何度でも何カ所にも呼び出す事が可能となります。
デザインを整える
ここまでできたら一度デザインを整えてみます。
[css]
/* 基本の設定 */
body {font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
a{text-decoration: none;color: #0c8bcd}
div#container {width: 980px;margin: auto}
/* ヘッダー */
div#header {font-family: 'Trebuchet MS', sans-serif;
margin-bottom: 20px}
div#header h1 {font-size: 3em;margin: 0}
div#header h1 a {color: #282f33}
div#header p#desc {font-size: 1em;
font-weight: bold;
color: #999999;margin: 0 0 5px}
/* フッター */
div#footer {border-top: solid 1px #aaaaaa;
padding: 6px 0;
clear: both}
div#footer p {font-size: 0.75em;
font-style: normal;
font-family: Verdana, sans-serif;
margin: 0}
[/css]
上記のコードを「style.css」に（今書かれてるものを消さないでその下に）追記する形で貼り付けましょう。
サイト名や説明文の位置やフォント、フォントサイズが変わりサイト名の下のリンクの下線を消えました。またフッターに線が一本ひかれて、フッターとわかるようにしてみました。
サイト制作時におけるフォントの決め方などは「CSSのfont-family指定に関する考察 2014年版」このような記事を参考にするとわかりやすいです。
090-3990-0645
