見出し画像

【 WordPress ＃4 】 サイト制作時のファイルの初期設定　FirE♯538

S.A.P.Studio

 WordPressでのサイト構築をHTMLサイトからの移行ではなく、始めから WordPressで行うことを目的にしたシリーズです。

今回は、WordPressでのサイト制作時に、初期設定として置いておくことをオススメするファイルと、その中身を紹介します。



【 必要なファイル 】

こちらの記事で、必要なファイルを紹介しました。

その中身に初期設定として書いておくと便利なコードを紹介します。


header.php：ヘッダー用
footer.php：フッター用
front-page.php：トップページ用
sidebar.php：サイドバー用（必要な場合）
single.php：記事ページ用
archive.php：記事一覧ページ用
page-スラッグ名.php：固定ページ用（階層ページ用）
functions.php：機能を追加するためのファイル

これらのファイルの中身を見ていきます。


■ header.php

<!DOCTYPE html>
<html lang="ja">


<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name=”description” content=”ディスクリプションテキスト” />

  <!-- ファビコン -->
  <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">

  <!-- WEBサイトタイトル -->
  <title>タイトル</title>

  <!-- reset.css destyle ※任意です-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />

  <!-- CSSへのリンク　必要に応じ追加-->
  <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/example.css">


  <!-- wp_head -->
  <?php wp_head(); ?>


</head>



<!-- bodyにクラスを付与する -->
<body <?php body_class(); ?>>



  <!--header-->
  <header class="header">


  </header>
  <!--/header-->

header.phpには、HTMLの基本のタグをか入れておきます。

WordPress特有の書き方である、CSSのリンクや、wp_head を書いておきます。

bodyにclassを付与するためのコードを追加しています。
これによりページに応じたclassを自動で付与します。

<body class="home blog">


headerの閉じタグまでを含ませます。


■ footer.php

<!--フッター-->
<footer class="footer">

  <!--Copyright-->
  <small>Copyright©︎ ALL RIGHTS RESERVED.</small>

</footer>
<!--/フッター-->


<!--wp_footerー-->
<?php wp_footer(); ?>

</body>

</html>

footerには、copyright表示のコードを置いています。

bodyの閉じタグの上に、wp_footer を設置します。

htmlの閉じタグまでを含ませます。



■ front-page.php

<!--get header-->
<?php get_header(); ?>


<!--get sidebar　　※必要な場合-->
<?php get_sidebar(); ?>


<!--メイン-->
<main class="main">
</div>
<!--/メイン-->



<!--get footer-->
<?php get_footer(); ?>

front-pageは、サイトのトップページの役割を持つファイルになります。

WEBサイトの顔となるページですので、様々な機能を追加する可能性があるファイルです。

初期設定としては、get_header と、get_footerと配置しておきます。


■ sidebar.php

<!--サイドバー-->
<aside class="sidebar">


</aside>
<!--/サイドバー-->

サイドバー用のファイルです。

サイドバーを設置する場合に用意します。

中身は、WordPressのプラグインを使用して設計していく方が良いでしょう。



■ single.php

<!--get header-->
<?php get_header(); ?>

<!--get sidebar　　※必要な場合-->
<?php get_sidebar(); ?>


  <!--記事-->
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
  ?>

      <article class="article">

        <div class="article-header">
          <h2 class="article-title"><?php the_title(); ?></h2>
        </div>

        <div class="article-info">
          <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
        </div>

        <div class="article-content">
          <?php the_content(); ?>
        </div>
      </article>

  <?php endwhile;
  endif;
  ?>

  <!--/記事-->


<!--get footer-->
<?php get_footer(); ?>

記事の詳細ページのためのファイルです。

WordPressのテンプレートタグが配置してあるので、投稿のタイトル、日付、本文が取得できるようにしてあります。

そのコードは以下の通りです。

<?php the_title(); ?>

<?php the_time('Y-m-d'); ?>

<?php the_content(); ?>

これらのコードの位置を調整し、内包するclassに、CSSで装飾を加えて、カスタマイズして使うことができます。


カスタム投稿タイプを使用する場合はこちらです。→



■ archive.php

<!--get header-->
<?php get_header(); ?>

<!--get sidebar　　※必要な場合-->
<?php get_sidebar(); ?>

<!--ブログ-->
<div class="blog">
  <div class="blog-container ">

    <div class="blog-container-header">
      <h1 class="page-title"><?php echo get_the_title(); ?></h1>
    </div>


    <!--ブログ一覧-->
    <div class="blog-container-inner">

　　　　　　　　<!--プラグイン WP SHOW POST　を使う-->
    <?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( 98 ); ?>

    </div>
    <!--/ブログ一覧-->




  </div>
</div>
<!--/ブログ-->





<!--get footer-->
<?php get_footer(); ?>

WordPressのプラグイン「WP SHOW POST」を使用した場合のコードです。

<!--プラグイン WP SHOW POST　を使う-->
<?php if ( function_exists( 'wpsp_display' ) ) wpsp_display( 98 ); ?>

こちらのコードがプラグインを呼び出すショートコードです。
「98」の数字は、それぞれ別の数字になります。


■ page-スラッグ名.php

<!--get header-->
<?php get_header(); ?>

<!--get sidebar　　※必要な場合-->
<?php get_sidebar(); ?>





 <!--get footer-->
 <?php get_footer(); ?>

階層ページ用のファイルです。

このファイルの使い方を簡単に解説します。
（詳しくは別の記事に書く予定です。）

例えば、会社概要ページを作るとすると、
ファイル名を[ page-about.php ] などにします。

この[ about ]　の部分が、”スラッグ”　になります。

この[ page-about.php ]というファイルを作って、aタグでリンクを作るだけでは、このページは表示されません。

必ず、固定ページを作り、タイトルに「about」と入力しましょう。

この固定ページの作成が、スラッグ ”about”　のページを生成し、その内容として、[ page-about.php ]というファイルが呼び出させます。

これは非常に重要です。


■ functions.php

<?php



/** アーカイブページ設定*/
function post_has_archive($args, $post_type)
{
  if ('post' == $post_type) {
    $args['rewrite'] = true;
    $args['has_archive'] = 'news'; //記事一覧ページのスラッグ名 ※任意名
    $args['label'] = 'お知らせ一覧'; // ※任意名
  }
  return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);




/** カスタム投稿タイプ追加 お知らせ（の場合）*/
add_action('init', function () {
  register_post_type('news', [
    'label' => 'お知らせ', //投稿タイプ名
    'public' => true, //メニュに表示する
    'menu_position' => 5, //メニュのどこに表示するか
    'supports' => ['thumbnail', 'title', 'editor'], //投稿編集画面の機能
    'has_archive' => true/* アーカイブページを持つ */
  ]);
});


/** カスタム投稿タイプ追加 ブログ（の場合）*/
add_action('init', function () {
  register_post_type('blog', [
    'label' => 'ブログ', //投稿タイプ名
    'public' => true, //メニュに表示する
    'menu_position' => 6, //メニュのどこに表示するか
    'supports' => ['thumbnail', 'title', 'editor'] ,//投稿編集画面の機能
    'has_archive' => true /* アーカイブページを持つ */
  ]);
});



/**記事のサムネイル使用可能にする設定 */
add_theme_support('post-thumbnails');



/**コンタクトフォーム 確認用メールアドレス入力 */
function wpcf7_text_validation_filter_extend($result, $tag)
{
  global $email_confirm;
  $tag = new WPCF7_Shortcode($tag);
  $name = $tag->name;
  $value = isset($_POST[$name])
    ? trim(wp_unslash(strtr((string) $_POST[$name], "\n", " ")))
    : '';
  if ($name == "email") {
    $email_confirm = $value;
  }
  if ($name == "email_confirm" && $email_confirm != $value) {
    $result->invalidate($tag, "確認用のメールアドレスが一致していません");
  }
  return $result;
}
add_filter('wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2);
add_filter('wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2);







/**サイドバーを有効にする */
function my_theme_widgets_init()
{
  register_sidebar(array(
    'name' => 'Main Sidebar',
    'id' => 'main-sidebar',
  ));
}
add_action('widgets_init', 'my_theme_widgets_init');









/**
 * 検索結果ページ表示時のメインクエリを変更
 *
 * @param in $query : クエリ.
 */
function change_main_query($query)
{
  if (!is_search()) {
    return;
  }
  $query->set('posts_per_page', '15');
}

add_action('pre_get_posts', 'change_main_query');

functions.phpは、WordPressの各種設定を行うためのファイルです。

初期設定としては、「アーカイブページを利用する」「カスタム投稿タイプの追加」「記事にサムネイルを使用する」「サイドバーを有効にする」
などの設定を行なっています。

必要に応じて、機能を追加、削除が可能です。


【 まとめ 】

WordPressの各ファイルの、初期設定について解説しました。

これは一例ですので、自分に必要なコードを初期設定として、ファイルに初めから書いておきましょう。

コーディングの時短にも繋がします。

この記事が気に入ったらサポートをしてみませんか？