Zenn
Open7

WordPress構築まとめ

PHP
WordPress
新山 慶介新山 慶介

wordpress 構築手順

事前準備

ローカルサーバー構築用ソフトウェアインストール

MAMP or XAMPP をインストールする
MAMP
[XAMPP]https://www.apachefriends.org/jp/download.html

個人的に Windows → XAMPP | Mac → MAMP で使用しています。

WordPressローカルファイルダウンロード

WordPress.org
↑よりダウンロードしておく

テーマ作成

wp-contents/themes/ 下に任意の名前でディレクトリ（テーマフォルダ）を作成
静的サイトからの構築であればそこに各ファイル / ディレクトリ打ち込み

必須ファイル

  • index.php
  • front-page.php
  • header.php
  • footer.php
  • functions.php

上記1式作成 & 編集
書き方は別途記事参照。（準備中）

DBの作成 & WordPressセットアップ

MAMP or XAMPP でphpMyAdminに入り、任意の名前でDB作成。
localhost/[テーマ名]で立ち上げるとwpの初期設定画面が出てくるので諸々設定。

設定が終わるといつもの画面に。
管理画面からテーマ選ぶのを忘れずに。

新山 慶介新山 慶介

投稿のサムネイルを有効化する

functions.php
/* ---------- 下記追加 ---------- */
add_theme_support('post-thumbnails');
新山 慶介新山 慶介

管理画面デフォルトの 「投稿」 の名称を変更する

functions.php
/* ---------- 下記を追加 ---------- */

function Change_menulabel()
{
  global $menu;
  global $submenu;
  $name = 'お知らせ';
  $menu[5][0] = $name;
  $submenu['edit.php'][5][0] = $name . '一覧';
  $submenu['edit.php'][10][0] = '新規' . $name . '投稿';
}

add_action('admin_menu', 'Change_menulabel');
新山 慶介新山 慶介

カスタム投稿を作成

functions.php
/* ---------- 下記を追加 ---------- */
add_action('init', 'create_post_type');

function create_post_type()
{

  register_post_type(
    'article',
    array(
      'label' => '記事投稿',
      'public' => true,
      'has_archive' => true,
      'show_in_rest' => true,
      'menu_position' => 5,
      'supports' => array(
        'title',
        'editor',
        'thumbnail',
        'revisions',
      ),
    )
  );

  register_taxonomy(
    'article-cat',
    'article',
    array(
      'label' => 'カテゴリー',
      'hierarchical' => true,
      'public' => true,
      'show_in_rest' => true,
    )
  );
}
新山 慶介新山 慶介

アーカイブページ作成後の注意点：

パーマリンク設定を空更新しないと反映されない。

新山 慶介新山 慶介

front-page.php

投稿一覧取得

<?php
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'post_status' => 'publish'
  );
  $query = new WP_Query($args);
  ?>
  <ul>
    <?php
    if ($query->have_posts()) :
      while ($query->have_posts()) : $query->the_post();
        $cats = get_the_category();
        $cat = $cats[0];
        $cat_name = $cat->name;

        echo '<li>' .
          '<a href="' . get_the_permalink() . '">' .
          '<div class ="p-news__header">' .
          '<time>' . get_the_date("Y/m/d") . '</time>' .
          '<span>' . $cat_name . '</span>' .
          '</div>' .
          '<p>' . get_the_title() . '</p>' .
          '</a>' .
          '</li>';

      endwhile;
    else :

      echo '<li class="c-post__item"><span>お知らせはまだ登録されておりません。</span></li>';

    endif;
    ?>
  </ul>

変数宣言部分

<?php
  $args = array(
    'post_type' => 'post',
    'posts_per_page' => 5,
    'post_status' => 'publish'
  );
  $query = new WP_Query($args);
  ?>

ポストタイプ
'post_type' => 'post',
カスタム投稿は任意で宣言したポストタイプ名
例）'post_type' => 'article', など

表示カラム数
'posts_per_page' => 5,
一覧表示するカラム数を決める。記載がなければ無制限。

投稿ステータスフィルター
'post_status' => 'publish'
↑の場合は公開されている投稿のみ表示。
ちなみに、他のステータスは以下の通り。

ループ

if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();

         /*  ループ内処理 */

    endwhile;
else :

    /*  例外処理 */

endif;

直訳：クエリが投稿を持っている間、投稿一覧から投稿を1件ずつ情報を取り出す。

カテゴリ名取得

$cats = get_the_category();
$cat = $cats[0];
$cat_name = $cat->name;

ほぼおまじない。
get_the_category();で取得した内容が配列で→1個の配列の中の0番目を指定して→その配列のnameカラムを取得してる、みたいな感じだと思う。多分おそらくMeybe。

カスタム投稿の場合
カスタム投稿のカテゴリを参照する場合、get_the_category();を使用するとエラー吐く。
なぜなのか深く調べると時間かかりそうなので割愛。

カスタム投稿の場合は以下のように記述する。（※ post_type : 'article', taxonomy: 'article-cat'）

$article_cats = get_the_terms($post->ID, 'article-cat');
$article_cat = $article_cats[0];
$article_cat_name = $article_cat->name;

正しいかはわからん。動いてるのでよし。

html出力部分

echo '<li>' .
          '<a href="' . get_the_permalink() . '">' .
          '<div class ="p-news__header">' .
          '<time>' . get_the_date("Y/m/d") . '</time>' .
          '<span>' . $cat_name . '</span>' .
          '</div>' .
          '<p>' . get_the_title() . '</p>' .
          '</a>' .
          '</li>';

投稿のデータを引っ張り出しながらhtml文を作るところ。
'. [php文] . ' ←この記述あんまり慣れなくて時間かかった。

新山 慶介新山 慶介

初期学習終了後、デザインから完全新規 WordPress構築 メモ

成果物・かかった時間

制作サイト（公開済み）
Github

ページ数：5p弱

かかった時間はデザイン面含めて7h弱。
Xdで簡単なWF作成→コーディングまでで2hくらいかかったので実際のコーディングは5hで終了。

つまずいたところ

webフォント

今更ながら、ローカルにフォントを落として使う方法を知らなかった。
意外と簡単だったので割愛。

the_content()

コンタクトフォーム導入後、なぜか反映されないので色々調べていたが、
<?php echo the_content() ?>
が
<?php echo get_the_content() ?>

になっていた。
このタグの直前・直後が <?php echo get_header() ?> <?php echo get_footer() ?> だから紛らわしい。

今後やりたいこと

今後、特化ブログ4つと雑記ブログ1つを同時運用する予定のため、検索機能やWordPressならではの機能実装を色々やってみたい。