目次
作成するフォルダとファイル
Themesにオリジナルテーマのフォルダ作成
フォルダの中に以下ファイルを作成
index.php（必須）
style.css（必須）
functions.php
front-page.php
page.php
single.php
404.php
archive.php
js/common.js
style.cssへの記述（必須）
style.cssに名前などを記述。
詳細はここから
最低限Theme Nameを記入。
/* Theme Name: My Original theme */
index.phpに記述
h1タグを追加し読み込みの確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WordPress</title>
</head>
<body>
<h1>Hello WordPress!</h1>
</body>
</html>新規に作成したテーマに切り替えて確認
【外観】⇨【テーマ】⇨【作成したオリジナルテーマ】
index.phpに必要なアクションを記述
<?php wp_head(); ?>
</head>functions.phpでcssを読み込む
（階層 ⇨ テーマ直下に index.php, style.css, functions.php）
<?php
function my_styles() {
wp_enqueue_style('my-style', get_theme_file_uri('/style.css'));
}
add_action( 'wp_enqueue_scripts', 'my_styles' );functions.phpでjs読み込み
function my_scripts()
{
wp_enqueue_script(
'common-script',
get_theme_file_uri('/js/common.js'),
// 既存のjquery読み込み
array('jquery'),
// バージョン
1.0,
// body終了タグ前に挿入
true
);
}
add_action('wp_enqueue_scripts', 'my_scripts');jQuery使う
jsファイルに記述し検証で確認
jQuery(function(){
console.log(1111)
})headとbodyの一部変更
charsetとtitle, bodyを変更
<head>
<!-- 引数にcharsetを設置するとUTF-8が指定される -->
<meta charset="<?php bloginfo('charset'); ?>" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); wp_title('|', true, 'left'); ?></title>
<?php wp_head(); ?>
</head>
<!-- ページ毎にclassが付与される -->
<body <?php body_class(); ?>>Thumbnailを使う
functions.php
// アイキャッチ画像を使えるようにする
add_theme_support('post-thumbnails');ページ内への記述
<?php if(have_posts()):
while(have_posts()): the_post(); ?>
<?php if (has_post_thumbnail()) : ?>
<?php the_post_thumbnail('thumbnail'); ?>
<?php else : ?>
<img src="<?php bloginfo('template_url'); ?>/img/noimage.jpg" alt="画像未設定" />
<?php endif ; ?>
<?php endwhile; endif; ?>最新の投稿を表示
<?php
$args = array(
'posts_per_page' => 3 // 表示件数
);
$posts = get_posts($args);
foreach ($posts as $post) : // ループの開始
setup_postdata($post); // 記事データの取得
?>
<div class="news">
// 投稿日の取得
<p><?php echo get_the_date(); ?></p>
// 記事のリンク取得とタイトルの取得
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
</div>
<?php
endforeach; // ループの終了
?>
よく使うテンプレートタグ
the_title()
have_posts()
the_post() //最新の投稿を取得
よく使うパターン
最新の投稿記事を取得、タイトル表示
<?php if (have_posts()) : ?>
<?php while (have_post()) : ?>
<?php the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; ?>
<?php else : ?>
<h3>投稿記事はありません</h3>
<?php endif; ?>カテゴリーとタグ
カテゴリーは階層構造にできる
タグは同列で扱われる
