wordpress テーマの作成(フッターの作成)

「footer.php」への書き込み

ヘッダーと同じようにfooter.phpにもコードを書き込んでみます。
書き込むコードは以下になります。
[php]
<!-- フッター -->
<div id="footer">
<p>Copyright &copy; <?php bloginfo('name'); ?>, All rights reserved.</p>
</div>

</div>
</body>
</html>
[/php]

フッターの記入1、管理画面>メニュー>外観を選択
2、テーマの編集を選択
3、画面右端 フッター(footer.php)を選択
4、エディタ切り替えの確認
5、コードをコピーしてエディタへ貼り付け
6、ファイルを更新をクリック
7、ファイルの編集に成功しましたを確認

以上がフッターへの記述になります。次にこれをhoom.phpに呼び出すコードを記載してみます。

hoom.phpへ記述する

home.phpへ書くコードは以下
[php]
<?php get_footer(); ?>
[/php]
この1行だけです。それではコピーして貼り付けてみましょう。
フッターの呼び出し1、home.phpを選択
2、エディタ切り替えの確認
3、コードの貼り付け
4、ファイルを更新
5、ファイルの更新に成功しましたを確認
6、テーマ名をクリック

topの確認footer「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の記入サイト名や説明文の位置やフォント、フォントサイズが変わりサイト名の下のリンクの下線を消えました。またフッターに線が一本ひかれて、フッターとわかるようにしてみました。


サイト制作時におけるフォントの決め方などは「CSSのfont-family指定に関する考察 2014年版」このような記事を参考にするとわかりやすいです。

ABOUT ME
moja
昭和47年生まれ。生まれた時からカープファン。 姫路生まれ姫路育ち。現在は相生市矢野町榊。 パソコン販売・修理・組立、出張サポート、ホームページ制作・WEBデザインなど。 奥さん1人と4男の父 真宗門徒
にほんブログ村 地域生活(街) 関西ブログ 姫路情報へにほんブログ村 子育てブログへにほんブログ村 野球ブログ 広島東洋カープへ