WPテーマ自作への道(1)トップページとヘッダーを作成する【FC2→WordPress移行レポ13】

投稿日:  カテゴリ: ブログ&IT
このエントリーをはてなブックマークに追加
LINEで送る
Share on Facebook

今回はオリジナルテーマ作成の第一歩。

トップページとヘッダーを作成します。

medium_3414373319

 



WordPressでindex.phpファイルを編集する

まずはWordPressの管理画面(ダッシュボード)に入り、「外観」→「テーマ編集」を選択します。
ここからWordPressにアップしてあるファイルを編集したりできるので、覚えておきましょう。


画面右側の「編集するテーマを選択」が『testtheme』になっていることを確認し、その下の『テンプレート』の中から『index.php』ファイルを選択します。

themehensyu1

すると上記のような画面が出てきます。

まだなーんにも入力してない、真っ白な状態のphpファイルです。



ソースを記述する

上の画面の記入欄に、次のような情報を記入していきます。

themehensyu2

※上記は見やすいように枠で囲ってあるが、実際の編集画面にはありません。

青枠の部分は「このページのタイトルを表示しなさいよ」というコードです。
これによって、タブのところにブログのタイトルが表示されます。

testtheme1



ヘッダーの部分

赤枠の部分はヘッダー部に関する記述です。


一番上の部分は、本の「しおり」のようなもので、目印として書いておく部分です。

それ以降の部分は、ページのタイトルとページの説明を記述させるためのコードです。

<?php bloginfo(‘○○○’); ?>という部分はブログの基本情報を表示させるためのタグです。

 

それ以外の部分はこのページの基本となるソースです。
まぁ何を表しているのか、私もよくわかってないのですが、とにかくそのまま書いていけば問題ないでしょう。

 

最後に編集画面下の『ファイルを更新』ボタンを押して、保存完了。

さて、ここまで記述すると次のようになります。

 

 

今日の作業の成果

<Before>
testtheme0


<After>
testtheme3



参考書はこれがイイ!!

この記事は下記の本を参考にして書きました。何冊もWordPressの参考書を読んでみたが、ダントツにわかりやすい本。

エビスコム ソシム 2010-09-08
売り上げランキング : 2448
by ヨメレバ



この工程でかかった時間

・ソースの記述・・・15分


これまでのまとめ

前回までのレポートは↓のNAVERまとめをご覧ください。
初心者でもできる!FC2からWordPressに移行する方法まとめ – NAVER まとめ
WordPressがなんなのかすらよくわかっていない私が、8月までにFC2からWordPressに完全移行することを目指す奮闘記です。内容はブログ移行作業の進行に伴って徐々に追加していきます。 …

このエントリーをはてなブックマークに追加
LINEで送る
Share on Facebook