HTMLサイトをwordpressサイトにする場合
もとのhtmlファイルを一部書き換えたりして
オリジナルテーマを作る作業が必要になります
そのなかでいつもやっていることの覚え書きです
いろいろ思い出したりする度に追加・修正すると思います
なおWordpressのインストールは省略します(￣▽￣)
始めに必須ファイルを作成
style.cssを作る
テーマ用のフォルダ（ここではフォルダ名をshiro_themeとします）を作り、
その中にstyle.cssを作ります
元のサイトのstyle.css等、メインのcssをコピーします
一番上にこれ↓を記述
/*
Theme Name: テーマの名前を記入します
*/index.phpを作る
自分はいつもいったんトップページ（index.html）をコピーします
必須の内容はここまで この時点でサーバーにアップしても
テーマとしてきちんと表示されます
※テーマ一覧画面で表示されるサムネイル（スクリーンショット）を
作成したい場合は
1200×900pxで「screenshot.png」を作り
style.cssとindex.phpと同じ階層に入れます
トップページを作る
header.php、footer.phpを作る
トップページをコピーして作成したindex.phpから、
共通部分となるページのヘッダー部分
（たいてい一番上からグローバルナビのあたりまで）と
フッター部分をそれぞれ
header.php
footer.php
に分けます
★このときheader.phpの</head>の直前に
<?php wp_head(); ?>footer.phpの</body>の直前に
<?php wp_footer(); ?>を入れます
index.phpでの呼び出しはそれぞれ
/*header.phpの呼び出し*/
<?php get_header(); ?>
/*footer.phpの呼び出し*/
<?php get_footer(); ?>パス等を書き換える
作成したindex.php、header.php、footer.phpは
中身がHTMLのままではcssや画像などを表示できないので書き換えます
style.css
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />style.css以外のcss（cssフォルダ内のindex.cssを呼び出す場合）
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/index.css" type="text/css" />javascriptも同じようにリンクを書き換え
基本的に相対パスになっているところはすべて書き換えます
ページタイトルやディスクリプション、読み込ませたいcssなど
ページごとに違うものを記述したいときの書き方↓
トップページだけに記述
<?php if ( is_home() || is_front_page() ) : ?>
ここに記述したい内容
<?php endif; ?> 特定の固定ページだけに記述
//もし固定ページのIDが5だった場合
<?php if(is_page( '5' )): ?>
5の場合に書きたい内容
//IDが5ではなく7だった場合
<?php elseif ( is_page('7') ) : ?>
7の場合に書きたい内容
<?php else: ?>
<?php endif; ?>特定のカスタム投稿だけに記述
<?php if(is_singular('カスタム投稿スラッグ名')): ?>
書きたい内容
<?php endif; ?>画像パスの書き換え
src="img/
↓
src="<?php echo get_template_directory_uri(); ?>/img/トップページURL
<?php echo home_url() ?>テーマフォルダをサーバーにアップ
ここまでできたらshiro_themeフォルダ （仮名） を
wordpressをインストールしたフォルダの中にある
wp-content/themes/ の中にアップ
wp-content/themes/shiro_theme
となるように
★ここでwordpress管理画面にログイン、外観→テーマで一覧が出たときに作成したものが出てきたらOK、それを有効化します
ここまで、必須ファイルであるindex.phpを使って
トップページを作成してきましたが、
本来トップページにはindex.phpをそのまま使用しないことが多いです
なので後からでもいいのでindex.phpをコピーして
front-page.phpまたはhome.phpを作成します
そうするとトップページとしてはそちらが先に呼び出されます
下層ページを作る
固定ページを作成
固定ページのデフォルトはpage.php
固定ページのデザインがある程度同じなら
page.phpのみでcssだけ少し変えるとかでもいいかもしれないですが
自分の場合はページごとに書き方やデザイン等
がらりと変わる場合が多かったので、
各固定ページごとに個別のファイルを作成します
固定ページ用のテンプレートを作成
固定ページのURLを決めてその名前でphpファイルを作成
例えば会社概要ページで サイトドメイン/companyとしたかったらcompany.php
一番上にこれ↓を入れます
<?php
/*
Template Name: 会社概要（テーマの名前を入れる。ページのタイトルにするとわかりやすい）
*/
?>あとはトップページと同じように、もとのhtmlファイルの内容をコピーして
header、footer部分の置き換えやパスの書き換えを行っていきます
サーバーにアップロードし、管理画面から固定ページを作成
サーバーにアップした後で実際の固定ページを管理画面から作成します
右メニュー「パーマリンク」からURLをファイル名と同じものに書き換え
同じく右メニュー「ページ属性」がデフォルトテンプレートになっているところを
アップしたテンプレートに変更します
実際に表示されていればOK
固定ページのURLを出力するときは↓
<?php echo home_url() ?>/〇〇〇（パーマリンク）固定ページに本文を記述してそれをテンプレートで呼び出す場合
ページの内容をすべてテンプレートファイルに書く場合もありますが
管理画面の固定ページ本文に内容を書く場合もあります
それを呼び出すにはテンプレートファイルに以下を記述
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>いったんここまで
この次はお知らせやブログ等、更新できるタイプの
ページ用テンプレートについてです
コメント