wordpressにオリジナルのテンプレートをアップロードする際、
忘れがちなチェックポイントをまとめました。

htmlからWordPressへ置き換え

htmlで作成したファイルをwordpressに置き換える際に、専用のタグに置き換える必要があります。

</>html

<img src="img/slider.png" alt="">

</>wordpress

<img src="<?php bloginfo('template_url'); ?>/img/slider.png" alt="">

</>html

<a href="#">ホーム</a>

</>wordpress

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

</>html

<a href="#">リンク</a>

</>wordpress

<a href="<?php echo home_url(); ?>/スラッグ名/">リンク</a>

</>html

<link rel="stylesheet" href="style.css">

</>wordpress

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

</>html

<link rel="stylesheet" href="top.css">

</>wordpress

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

ファイルの設定

CSSファイルを一つにまとめている場合は、syle.cssだけ、ファイルの外に出し、 index.phpと同じ階層に置く。

同じく、common系のheader.phpやfooter.phpも index.phpと同じ階層に置く。

style.cssの作成時

style.cssの始めに、以下のタイトルを入れる。

</>css

/*
Theme Name: テーマタイトル
Theme URL: http://xxxx.com
Description: サイト名
Author: 作者
Version: 01
*/

header.phpとfooter.php

ページを正常に読み込ませるために、挿入するタグです。

</>wordpress

<?php wp_head(); ?>
</head>

header.phpの中、</head>の直前に<?php wp_head(); ?> を、入れる。

</>wordpress

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

同じくfooter .phpにも、</footer>の直前に<?php wp_footer(); ?>を、入れる。

投稿関連のクラスを表示・追加

投稿を囲む要素に自動でクラスの追加ができます。

</>wordpress

<?php post_class(); ?>

このテンプレートタグをwordpressのループの中で使用します。

</>wordpress

<section <?php post_class(); ?>>

<section class="post-137 post type-post status-publish format-standard hentry category-photo tag-11">