基金訓練(Webデザイン・プログラミング科)の72日目に行ってまいりました。
72日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
72日目の内容は下記のとおりです。
１．HTMLでページの作成
- 普通に、HTMLとCSSでトップページなどの固定ページを作成します。
※この時きちんヘッダー部、コンテンツ部、フッター部をdivでグループ分けしておきます。
(オリジナルのID名と同じにならないよう、c_header、c_contents、c_footer等にします。) - これをコピペして、WordPressのページを作成していきます。
- 作成したCSSファイルの入ったCSSフォルダと、使用したイメージの入ったimageフォルダをwordpressフォルダにコピーします。
※CSSファイル名は、c_style.css等に変更しておきます。
２．ヘッダー、フッターの変更
- ￥wordpress￥wp-content￥themes￥twentyten フォルダ内のファイルを変更するので、フォルダごとバックアップしておきます。
- ￥wordpress￥wp-content￥themes￥twentyten フォルダ内のheader.phpをテキストエディタ(UTF-8Nで保存できるもの)で開きます。
- <div id="header">～</div><!– #header –>の中身をすべて消して、先に準備しておいたHTMLのheaderの部分をコピペして置き換えます。
- <img>タグのイメージファイルのパスは、
<? bloginfo(‘url’); ?>/image/イメージファイル名
にします。 - <head>部に、CSSファイルとのリンクを記述します。
<link rel=”stylesheet” type=”text/css” href=”<? bloginfo(‘url’); ?>/css/c_style.css” /> - この状態で、ブラウザで確認すると、テンプレートデフォルトのCSSファイルがあるので、表示が崩れています。
※確認は、管理ページ左上のWordPressのロゴをクリックしておこないます。 - オリジナルのCSSファイルは ￥twentyten￥style.css なので、そのファイルをテキストエディタで開いて編集します。
※ #wrapperのwidthの値などを変更したりして、表示を整えます。 - フッターもヘッダーと同様にしてfooter.phpを変更します。
