【WordPress】静的HTMLをWordPress化する手順

wordpress

テーマの基本構造

基本ファイル

  • index.php
  • style.css
  • functions.php
  • header.php
  • footer.php
  • front-page.php(トップページ用)
  • page-〇〇.php(各固定ページ用・固定ページの数だけ必要)
  • single.php(投稿ページ用)
  • assetsフォルダ(css/img/js フォルダ収納)
  • 最初の3つのファイルはテーマとして認識されるために必須のファイルになります。 テーマフォルダ直下にあるstyle.cssはテーマの宣言だけ書いて中身は空でもOK。(実質反映するcssはassetsフォルダ内のcssを使用。)
  • page-〇〇.php…例えばabout.htmlを反映させる(固定ページのスラッグをaboutにする)場合、page-about.phpにすると、自動で表示されるようになります。

style.css

テーマフォルダ直下のstyle.cssに記すテーマの宣言は以下です。

/*
Theme Name: テーマの名前
*/

 Author:制作者
 Description:テーマについての説明
 Version:バージョン情報
 URL:アドレス
 などの情報を含めても。

 

 

固定ページ用 page-〇〇.php

テンプレート名(例:aboutなら会社情報など)を記載します。

<?php
/*
 * Template Name: テンプレート名
 */
?>

固定ページの編集画面からプルダウンでテンプレートファイルを選択できるようになります。

ファイルの分割(共通パーツに分ける作業)

画像パスの修正

以下のコードでパスを修正します。

<!--修正前-->
<img src="assets/img/sub_logo.png" alt="">

<!--修正後-->
<img src="<php echo get_template_directory_uri(); ?>/assets/img/sub_logo.png" alt="">

header.php

header.phpとして共通化する部分を切り出します。
(<!DOCTYPE html> ~ グローバルナビあたりまでになると思います。)

必須コード

</head>(headの閉じタグ)直前に以下のコードを入れます。

<?php wp_head(); ?>

※メタタグの出力、JSのライブラリの読み込み、WordPressツールバーの表示など、Wordpressが自動的にHTMLを出力するために必要なコードです。(footer.phpで記載するwp_footer()も同様)

タイトル・メタタグなどをWP化

<title><?php bloginfo( 'name' ); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">

管理画面の「設定」>「一般」で設定された「サイトのタイトル」、「キャッチフレーズ」がここに反映されます。

※タイトルは、functions.php に書いたadd_theme_support( ‘title-tag’ ); でページに応じて吐き出されるので設定不要。

head部分で読み込むcssやjsをfunctions.phpで一元管理できるようにする

functions.phpに以下で読み込むことができるようにします。

<?php 
function my_enqueue_scripts(){
  wp_deregister_script('jquery');//wpデフォルトのjQueryを削除
  wp_enqueue_script( 'jquery', '//code.jquery.com/jquery-1.12.4.min.js', array(), '1.12.4');
  wp_enqueue_script( 'script.js',get_template_directory_uri().'/assets/js/script.js',array() );
  wp_enqueue_style( 'style',get_template_directory_uri().'/assets/css/style.css',array() );
}
add_action( 'wp_enqueue_scripts','my_enqueue_scripts' );

functions.phpに記載後、head内のcss,jsを読み込む記述を削除します。

トップページとサブページのheader.phpを出し分けたい場合

トップページ用にheader.php、サブページ用にheader-sub.phpを作成し、サブページではheader-sub.phpを読み込むように設定します。以下のコードで読み込みます。

<?php get_header( 'sub' ); ?>

その他、header.php内にif文を使って読み分ける方法もあります。

<?php if(is_front_page()): ?>

<!--この間にトップページにだけ表示したい部分を記述する-->

<?php else: ?>

<!--この間にトップページ以外の場合に表示したい部分を記述する-->

<?php endif; ?>

is_front_page()は表示しているページがトップページの場合TRUEを返す条件分岐タグです。

footer.php

footer.phpとして共通化する部分を切り出します。
(<footer>タグ以下~</html>までの部分)

必須コード

</body>(body閉じタグ)の直前に追記します。

<?php wp_footer(); ?>
</body>

front-page.php、page-〇〇.php や single.php

共通化したヘッダー部分を以下のコードで置き換えます。

<?php get_header(); ?>

同様にフッター部分を以下のコードで置き換えます。

<?php get_footer(); ?>

静的HTMLから切り分けた部分以外の残ったコードを、各該当ページに移します。

リンク先のWP化

ホームのURLを取得す“home_url”を使います。

<!-- ■トップページ -->
<?php echo esc_url( home_url( '/' ) ); ?>
<!--下層ページ -->
<!-- ■aboutページ -->
<?php echo esc_url( home_url( '/about/' ) ); ?>
<!-- ■newsページ -->
<?php echo esc_url( home_url( '/news/' ) ); ?>
<!-- ■contactページ -->
<?php echo esc_url( home_url( '/contact/' ) ); ?>

実際の使用例(トップページの場合):

<a href="<?php echo esc_url( home_url('/') ); ?>">ホーム</a>

about(会社情報)ページの場合:

<a href="<?php echo esc_url( home_url( '/about/' )  ); ?>">会社情報</a>

固定ページ用テンプレート(page.php)を作成する

※この項目は新たにテーマを作成するときに必要です。静的HTML→WP化の時は不要かもしれませんが一応記載します。(各固定ページの内容がすでにHTMLで作られているため。)

固定ページのコンテンツを表示したい部分に、以下のWordpressループを記述します。

<?php 
if(have_posts()):
    while(have_posts()):the_post();
?>

<?php the_content(); ?>

<?php
    endwhile;
  endif;
?>

WordPressループは、投稿や固定ページ、アーカイブページにおいて、記事を共通の方法で処理するための基本的な仕組みです。処理すべき記事の数だけ繰り返し処理を行います。

ページごとに適切なクラスを出力してくれる以下のテンプレートタグをbody開始タグ部分に入れておくと、テンプレートごとにcssが当てやすくなります。

<body <?php body_class(); ?>>

WordPressループ外で、該当ページタイトルを取得するテンプレートタグはこちら。

<h2><?php echo get_the_title(); ?>

投稿ページ(single.php)を作成する

こちらもWordpressループを使用して記事を出力します。

<?php 
if(have_posts()):
    while(have_posts()):the_post();
?>

<!-- 記事タイトル -->
<h2><?php the_title(); ?></h2>

<!-- 記事公開年月日 -->
<p><?php echo the_time('Y.m.d'); ?><p>

<!-- アイキャッチ画像 -->
<div class="thumb">
<?php if (has_post_thumbnail()) {
the_post_thumbnail();
} ?>
</div>

<!-- 本文 -->
<p><?php the_content(); ?></p>

<?php
    endwhile;
  endif;
?>

archive.php(投稿記事一覧ページ)を作成する

functions.phpに以下のコードを記し、投稿の一覧ページを作成できるようにします。

//投稿アーカイブページの作成
function post_has_archive( $args, $post_type ) {
	if ( 'post' == $post_type ) {
		$args['rewrite'] = true;
		$args['has_archive'] = 'blog'; 
	}
	return $args;
}
add_filter( 'register_post_type_args', 'post_has_archive', 10, 2 );

archive.phpにループを使用して出力します。

<ul>

<?php if(have_posts()): while(have_posts()):the_post(); ?>
<li>
<!--投稿記事のパーマリンクを出力-->
<a href="<?php echo get_permalink(); ?>">

<!--アイキャッチ画像を出力-->
<figure>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php else: ?>
<!--アイキャッチ画像がない場合以下のイメージを出力-->
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/index/thumb_01.jpg" alt="">
<?php endif; ?>
</figure>
										
<div class="text">
<!--タイトル-->
<p class="title"><?php the_title();?></p>

<!--抜粋文-->
<div class="excerpt"><span><?php the_excerpt();?></span></div>
<div class="row">

<!--日付-->
<span class="date"><?php the_time('Y/n/j'); ?></span>

<!--投稿の作成者名-->
<span class="author"><?php the_author(); ?></span>
</div>
</div>
</a>
</li>
<?php endwhile; endif; ?>	

</ul>

front-page.phpに投稿ページの情報を掲載する

サブループを用い出力します。

<?php
$args = array(
  'post_type' => "post",//投稿タイプ設定
  'posts_per_page' => 2,// 取得記事数
);

$my_query = new WP_Query($args);
if ($my_query->have_posts()): while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
      <dl>
        <dt><?php the_time('Y.m.d'); ?></dt>
        <dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
      </dl>
      <?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

このほか、ページネーションを付ける、とかお問い合わせページを作成する、とか、カスタムメニューを作成する、とかまだまだ順次書き足していきますがとりあえずここまで。

wordpress
スポンサーリンク
Web Parts Box
タイトルとURLをコピーしました