WPテーマ制作[3]-基本構造の作成-Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

2019.10.22 Tue 2019.10.24

WPテーマ制作[3]-基本構造の作成

初期ファイルの設定について

テーマフォルダをアップしてテーマを有効化したら、このままだと真っ白なページがルートに表示されます。

ここではサイドメニューのないタイプ、ワンカラムでのWordPressサイトを前提にテーマを作成します。基本構造としてまずはheader.php、footer.php、index.phpにWPタグのPHP交じりHTMLコードを記述していきます。

注意点としては、ワードプレスタグの＜?php wp_head(); ?＞をheader.php、＜?php wp_footer(); ?＞をfooter.phpにそれぞれ記述が必要です。

できるだけ汎用性を前提に制作すべきなので、できるだけ必要最低限のHTMLタグとWordPressタグのみで構成します。

[header.php]の記述

基本は必要最低限のHTMLタグとWPタグのみにします。 WPタグのwp_head()は必須です。ここでは独自のCSSやJSファイルの前にあえて設置しています。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語サイト指定-->
<head>
<meta charset="utf-8"><!--エンコードUTF-8指定-->
<title><?php bloginfo('name'); ?> - <?php the_title(); ?></title>
<meta name="description" content="<?php the_title(); ?>です。<?php bloginfo('description'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
<!--function.phpやプラグインを読込、WordPressシステム読込の記述-->
<!--スマホなどでの表示viewport設定-->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>/css/base.css">
<!--PC用スタイルシート読込-->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>/css/base_sp.css">
<!--スマートフォン用スタイルシート読込-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" defer></script>
<!--Jqueryはほぼ必須なのでCDN読み込みだがダウンロードして直接参照が推奨-->
<script src="<?php echo get_template_directory_uri(); ?>/js/utility.js" defer></script>
<!--オリジナルJQueryの読み込み-->
</head>
<body>
<div id="wra">
<header>
</header>

必要ファイルは用途に応じてあとで調整します。

[index.php]の記述

基本は必要最低限のHTMLタグとWPタグのみにします。 WPタグのwp_head()は必須です。ここでは独自のCSSやJSファイルの前にあえて設置しています。

<?php get_header(); ?>
<?php if ( have_posts() ) : ?>
<?php if ( is_home() && is_front_page() ) ://ホームページもしくはフロントページ指定されていたらタイトルタグを表示 ?>

<header>
<h1 class="pag-tit"><?php get_the_title(); ?></h1>
</header>
<?php endif; ?>
<?php
// ページ出力のループ処理をcontent.phpで実行する
while ( have_posts() ) :
the_post();//ループを止めるためのカウント記述
the_content();//固定ページで指定したホームページの内容の呼び出し
//get_template_part( 'content');
//テンプレートフォーマットを読み込む場合。この段階では使用しない。
// ループ処理の停止
endwhile;
else :
get_template_part( 'none', get_post_format() );
// 記事がなければ表示させるPHPファイル

endif;
?>
<?php get_footer(); ?>

サイドバーは＜?php get_sidebar(); ?＞で呼び出します。

[footer.php]の記述

フッター部はほとんど読み込み内容はありませんが、やはりWPタグのwp_footer()は必須です。
ここではスマホサイトでは必須のページトップボタンタグのみをデフォルトで配置しました。

get_header()とget_footerはheader.phpとfooter.phpを呼び出すための記述です。

</div><!-- End #wra -->
<footer>
</footer>
<p id="pag-top"><a href="#wra"><img src="<?php echo get_template_directory_uri(); ?>/images/but_pag_top01.png" alt="ページトップへ"></a></p>
<?php wp_footer(); ?>
<!--function.phpやプラグインを読込、WordPressシステム読込の記述-->
</body>
</html>