ねっとぱんだ-プログラミング勉強ブログ-

Webデザイン、プログラミングの勉強ブログ。

【WordPress】クライアントワークCMS化1 header/footer/画像のパス/カスタム投稿

クライアントワークのWordPress

クライアントワークをワードプレス化していく中での進捗をメモしていきます

header.phpとfooter.phpの作成

各ファイルに共通して表示させてたい部分をindex.phpから切り取って記述する。
index.phpで各ファイルを表示させたい部分に

<?php get_footer(); ?>
<?php get_header(); ?>

と記述する。

各ファイルで </head> の前には <?php wp_head(); ?>
各ファイルで </footer> の前には <?php wp_footer();?>
を記述する必要がある。

jsとcssの読み込み

functions.phpでwp_enqueue_script()やwp_enqueue_style()を使った記述が推奨されています。
http://shibatatakeshi.com/post-4243/

現状エラーが出てうまく記述できていないので、
テンプレート(index.php)に直書きしています。
この記述は非推奨で実際やってはいけません。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">

画像のパスの設定

画像のパスを吐き出す関数がある

get_template_directory_uri()
ディレクトリのURLを呼び出す。
get_stylesheet_directory_uri()
ディレクトリのURLを呼び出す。

テンプレート(index.php)の中で画像のパスを記述するときは上記の関数を記述しました。

<p><img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="ビーズブーケロゴ"></p>

ただcssのbackgroundからパスを指定したり、jsで画像置換させようとするとうまくできなかったので絶対パスで記述しました。

css

background:url(http://beadsbouquet.webcrow.jp/wp/wp-content/themes/bbwp/images/about.png);

js

//絶対パスと画像の名前を格納
var img_path = 'http://beadsbouquet.webcrow.jp/wp/wp-content/themes/bbwp/images/'
var img_arr = ['slide1.jpg','slide2.jpg','slide3.jpg','slide4.jpg','slide5.jpg'];

slide1.src = img_path + img_arr[btn_num];

個別ページとカスタム投稿ページ作成

チュートリアルを見ながらカスタム投稿ページと個別ページを作成しました。

カスタム投稿ページ
http://webdesignrecipes.com/wireframe-with-wordpress-post-type/
個別ページ
http://webdesignrecipes.com/wordpress-corporate-website/

なれたらfunctions.phpの記述をやっていきたいです。