タグ WordPress | WEBデザイン＆WEBプログラミング -sei2の日記-

基金訓練(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を変更します。

実習で使用している教本

基金訓練(Webデザイン・プログラミング科)の71日目に行ってまいりました。
71日目は、PHPプログラミングとWordPressの実習です。
WordPressをカスタマイズする過程の中でPHPを学習するようです。

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

※XAMPP Liteをインストールすれば、PHP、Webサーバ、データベースサーバをまとめてインストールできます。

ZIPファイルを解凍し、xamppliteフォルダを任意の場所にコピーします。
　(日本語名のフォルダはだめなので、Cドライブのルートにコピーすればいいと思います。)

初期設定の為、フォルダ内のsetup_xampp.batを実行します。
　(ドライブのルートにxamppliteフォルダをコピーした時は、この設定は必要ありません。)

コマンドプロンプトが立ち上がるので、(y/n)の問い合わせ(3回)にすべてyキー+Enterキーを押した後、Enterキーを2回押し、(1-5/x)の選択でxキー+Enterキーで終了します。

各項目を次のように記入します。
　データベース名　test　(MySQLにデフォルトである空のデータベース)
　データベースのユーザー名　root　(MySQLにデフォルトであるユーザー名)
　データベースのパスワード　空欄(何も記入しない)
　他はデフォルトのまま

備考

Movable Typeの場合は、XANPP Liteではだめで、XAMPPを使用する必要があるようです。

実習で使用している教本