完全に一から template を作る

/wp-content/themes の中にフォルダを作り、ここで開発する

ここに配置すると、Wordpress の Appearance から追加できる theme になる。

必須項目は以下。

index.php を持つ -> これが全ページに適用される大元の template となる
style.css -> これに template のメタ情報も含ませること
style を適応したい場合には、少なくとも以下の stylesheet 読み込みをすること。

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

スタイルシートには以下の文言を記入すること

これが Wordpress 側からテンプレートを認識させるためのメタ情報となっている。

/*
	Theme Name: MyTheme
	Description: 
	Author: nakanishi
	Author URI: 
	Version: 1.0
*/

Pages それぞれに独自の template を与える場合

重要なのは、php のコメントとして、Template Name: name を入れること。これによって Pages の右側にある設定「Page Attribute」から選択できる template に適用される。

<?php
/****************************************

	Template Name: Top

*****************************************/
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
	<title>Document</title>
</head>
<body>
<div>
	<?php if ( have_posts() ) : /** WordPressループ開始（メインループ） */
		while ( have_posts() ) : the_post();
			remove_filter ( 'the_content', 'wpautop' ); /** 投稿に自動挿入される <p> タグを削除 */
			the_content();
		endwhile;
		else : ?>
		<h3>Not Found</h3>
		<p>Sorry, but you are looking for something that isn't here.</p>
	<?php endif; /** WordPressループ終了 */ ?>
</body>
</html>

特定のページをトップページにする方法

example.com にある page を表示するためには次の手順が必要。

setting->reading->Your homepage displays->a static page->home page->今作ったページを選択する

Previous子テーマで CSS, temp.php, function.php を上書きする Nextカスタムフィールから画像を読み込ませる

Last updated 6 years ago

<?php /**************************************** Template Name: Top *****************************************/ ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <title>Document</title> </head> <body> <div> <?php if ( have_posts() ) : /** WordPressループ開始（メインループ） */ while ( have_posts() ) : the_post(); remove_filter ( 'the_content', 'wpautop' ); /** 投稿に自動挿入される <p> タグを削除 */ the_content(); endwhile; else : ?> <h3>Not Found</h3> <p>Sorry, but you are looking for something that isn't here.</p> <?php endif; /** WordPressループ終了 */ ?> </body> </html>