WIING WebServiceCloudのWordPress用メディアブログテーマです。-WIING MEDIA

Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

  • twitter WIING WebServiceCloud
  • Instagram WIING WebServiceCloud
  • facebook WIING WebServiceCloud
  • note WIING WebServiceCloud
  • WIING media ログイン
HOME 〉WordPress 〉WPテーマ制作[3]-基本構造の作成

2019.10.22 Tue  2019.10.24

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

WordPressテーマ

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>
footer.phpにはページ表示に影響のない記述のみ書き込みます。

[解説]

[設定]-[表示設定]-[ホームページの表示]で表示したい固定ページ設定して、ホームページに内容が表示されていればまずはテーマ作成の第一歩が完成です。

ソースコードを表示して、意図したHTMLの内容が呼び出されているか確認します。

WIING MEDIA twitter

WIING MEDIA facebook

掲載情報につきましては当社が独自に調査、検証および収集した情報です。

情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。

掲載情報の修正・変更等をご希望の場合はお知らせください。