基金訓練に行ってきました。(72日目)その1


基金訓練(Webデザイン・プログラミング科)の72日目に行ってまいりました。
72日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。

72日目の内容は下記のとおりです。

1.HTMLでページの作成

  • 普通に、HTMLとCSSでトップページなどの固定ページを作成します。
    ※この時きちんヘッダー部、コンテンツ部、フッター部をdivでグループ分けしておきます。
    (オリジナルのID名と同じにならないよう、c_header、c_contents、c_footer等にします。)
  • これをコピペして、WordPressのページを作成していきます。
  • 作成したCSSファイルの入ったCSSフォルダと、使用したイメージの入ったimageフォルダをwordpressフォルダにコピーします。
    ※CSSファイル名は、c_style.css等に変更しておきます。

2.ヘッダー、フッターの変更

  • ¥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を変更します。





関連記事

カテゴリー:職業訓練
タグ: , ,

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください