脱初心者備忘録

ブログカテゴリ Click

WordPressをインストールしたら最初にやること

WordPressって便利ですよね。制作場面で、使う頻度も多いはず。
インストールして、プラグイン入れて、テンプレート作ってと、行う順序はいつも同じ。
デザインと機能が多少違うだけなので、最初に必ずやることを記録します。

プラグインを入れる

自分には必須のプラグインは以下の通り。

  • Query Monitor
  • WP-SCSS
  • Advanced Custom Fields
  • Custom Post Type UI
  • Breadcrumb NavXT
  • Table of Contents Plus（ブログにするなら）
  • SiteGuard
  • Theme Check
  • 独自プラグイン

独自プラグインは、自作したプラグインなどです。

Templateを作成する

付属のtwentytwentytwoとか使っても良いのですが、デザインがある程度きまっているのであれば、独自テンプレート一択です。
わかりやすい名前でテンプレートフォルダを下記に作成します。
wp-content\themes\
今回は、originalという名前でフォルダを作りました。テンプレート名はOriginalです。

テンプレートに絶対必要なファイルは、index.php・style.css・functions.php の3つ。
次の表示ファイルの画像を見てもらえばわかると思いますが、最低限この3つがあれば動作します。
ファイルには少しだけお約束があるので、それを作成したファイルに記入します。

index.phpには、いくつかWordPress独自のタグが必要です。

<?php
//index.php
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<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">

  <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
  <?php wp_body_open(); ?>
  <header><a href="<?php echo esc_url(home_url('/')); ?>" rel="home" class="brand-name" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></header>
  <main>
    <?php
      if (have_posts()) :
        while (have_posts()) : the_post();
      ?>
          <div class="">
            <a href="<?php the_permalink(); ?>">
              <h2 class="">
                <?php the_title(); ?>
              </h2>
              <h3 class="">
                <?php the_excerpt(); ?>
              </h3>
            </a>
            <p class="">Posted by
              <?php the_author(); ?>
              on <?php the_time(get_option('date_format')); ?>
            </p>
          </div>
    <?php
        endwhile;
        the_posts_navigation();
      endif;
      ?>
  </main>
  <footer><a href="<?php echo esc_url(home_url('/')); ?>">Copyright</a></footer>

</body>
</html>

style.cssには、Theme Nameが必須です。テンプレートの名前です。
その他の記載はオプションです。
Text Domain、Version、Description、Tags、Author、Theme URIなどが設定できます。

/*
Theme Name: Original
Version: 1.0
*/
@charset "utf-8";

/* -------------------------------------------------------------------------- */
/*  CSS Reset
/* -------------------------------------------------------------------------- */


html,
body {
	border: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
address,
big,
cite,
code,
em,
font,
img,
small,
strike,
sub,
sup,
li,
ol,
ul,
fieldset,
form,
label,
legend,
button,
table,
caption,
tr,
th,
td {
	border: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	padding: 0;
	text-align: inherit;
}

blockquote::before,
blockquote::after {
	content: "";
}

functions.phpです。内容は次で説明します。

<?php
//functions.php

WordPressで表示に使用するPHPファイル

wordpressでは、WEBページを表示するテンプレートファイルの名前があらかじめ決められています。
表示に使用するphpファイルは、上から有効になります。
例えば、スラッグ名がsweet・idが86というカテゴリーのページを表示するには、システムは最初にcategory-sweet.phpを探し、無ければ、category-86.phpを探し、無ければcategory.phpを探し、それもなければ、archive.phpを探し、無ければ、最終的にindex.phpを使ってページを表示します。

特定のページだけ独自のデザインとか独自の何かをしたいとき、この構成はとても有効です。

最初は、index.phpだけで、必要に応じてphpファイルを増やしていくやり方でよいと思います。

Functions.phpに書くこと

WordPressでfunctions.phpはテーマファイルの中に必ず存在します。
functions.phpは、そのテーマを動作させるために必要な機能が書かれています。
またテーマだけでなく、管理画面で使う機能の動作についても書くことができます。
通常WordPressに付属しているテーマには最初からfunctions.phpにいろいろ記載されているので、自分で追加で書くことは少ないですが、独自テンプレートの場合は、何も書かれていないので、WordPressで使用したい動作・機能に関して、自分で全部書かなくてはいけません。

とりあえず、最低限これは必要だというものを最初に書いて、あとから必要に応じて追加していきます。

<?php
//functions.php

if (!function_exists('original_start')) :
  function original_start()
  {
    //アイキャッチ
    add_theme_support('post-thumbnails');

    //タイトル
    add_theme_support('title-tag');

    //feed
    add_theme_support('automatic-feed-links');

    //タグ
    add_theme_support('html5', array(
      'search-form',
      'comment-form',
      'comment-list',
      'gallery',
      'caption',
    ));

    //ブロック
    add_theme_support('wp-block-style');

    //投稿エディター
    add_editor_style();

    //メニュー
    register_nav_menus(
      array(
        'global'  => 'グローバルメニュー',
        'utility' => 'ユーティリティメニュー',
        'drawer'  => 'ドロワーメニュー',
        'footer'  => 'フッターメニュー'
      )
    );
  }
endif;
add_action('init', 'original_start');

//ウィジェット登録
function add_sidebar()
{
  register_sidebar(
    array(
      'id' => 'main-sidebar',
      'name' => 'メインのサイドバー',
      'before_widget' => '<div class="sidebar-item">',
      'after_widget' => '</div>'
    )
  );
}
add_action('widgets_init', 'add_sidebar');

//サブタイトル
function change_title_separator($separator)
{
  $separator = '|';
  return $separator;
}
add_filter('document_title_separator', 'change_title_separator');


//stylesheetとjquery
add_action('wp_enqueue_scripts', function () {
  wp_enqueue_style('original', get_stylesheet_uri(), array(), '1.0.0');
  wp_enqueue_script('jquery');
});

とりあえず、これで初期設定は終わりです。
あとはサイトに応じてカスタマイズを加えていけばよいかと思います。