WordPress ことはじめ


[WordPress](http://wpdocs.osdn.jp/Main_Page)という名前は聞いたことがあっても<b>何ができるのか最初に何をしたら良いのか</b>分からないことが多いので最初にやるべきいくつかを紹介する。

# 環境情報

- MacOS Mojave
- Docker 20.10.2
- WordPress 5.6.1

# WordPress環境構築

## まずは動かしてみる

以下をコピって `docker-compose up` する。
起動したら「 http://localhost:8080 」にアクセスする。

```yaml:docker-compose.yml
version: '3'

services:

  # See: https://hub.docker.com/_/wordpress
  wordpress:
    image: wordpress
    container_name: wordpress_app
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: exampleuser
      WORDPRESS_DB_PASSWORD: examplepass
      WORDPRESS_DB_NAME: exampledb
    volumes:
      - ./app:/var/www/html

  db:
    image: mysql:5.7
    container_name: wordpress_db
    restart: always
    ports:
      - 13306:3306
    environment:
      MYSQL_DATABASE: exampledb
      MYSQL_USER: exampleuser
      MYSQL_PASSWORD: examplepass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  db:
```

## WordPress初期設定

初回「 http://localhost:8080 」にアクセスすると初期設定を色々聞かれるので適当に設定して完了させる。

## アップデート

起動できた場合、更新情報が存在することもあるため、アップデートしておくと良い。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/9d0ff2f2-d2cc-cf31-4540-f2f435ade2dc.jpeg" width="500px"></img>

## 日本語化

サイドメニューより「設定」に進んで、日本語化する。

- Settings > General > Site Language
  「日本語」を選択。

- Settings > General > Timezone
  「UTC+9」を選択。

- 「Save Changes」ボタンを押下する。

## ディレクトリ説明

| ディレクトリ        | 説明                                       |
| ------------------- | ------------------------------------------ |
| wp-content/themes/  | インストール済みテーマが管理されている     |
| wp-content/plugins/ | インストール済みプラグインが管理されている |
| wp-config.php       | DBの接続先情報など                         |

:point_up_2:これ以外は一旦、知らなくてもOK。

# テーマをインストール

サイドメニューの「外観」>「新規追加」から好きなテーマをインストールできる。インストールしたテーマは wp-content/themes/ 配下に格納される。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/67da8c90-a3eb-a12c-16aa-d518cd22ffa4.jpeg" width="500px"></img>

インストールしたテーマは「有効化」ボタンを押下すればすぐに適用される。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/884b061d-6589-e8f7-fa51-6951dfffaf71.jpeg" width="500px"></img>

# プラグインをインストール

いくつか便利なプラグインをインストールしてみる。基本的にインストールしただけではすぐに使えないものが多く、サイトに適用する場合は、各プラグインの使い方ページを参照してみると良い。

| プラグイン名            | 説明                                 |
| ----------------------- | ------------------------------------ |
| Breadcrumb NavXT        | パンくずリスト                       |
| WP-PageNavi             | ページネーション                     |
| All in One SEO          | SEO対策                              |
| No Category Base (WPML) | URLからカテゴリー削除してくれる      |
| Contact Form 7          | 簡単に問い合わせフォームを作成できる |

サイドメニューの「プラグイン」>「新規追加」から好きなプラグインをインストールできる。インストールしたプラグインは wp-content/plugins/ 配下に格納される。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/d3683457-03c4-285c-8d62-e2ec7951a0a6.jpeg" width="500px"></img>

# 子テーマを使ってみる

子テーマは、インストール済みテーマを修正することなく別ファイルで上書きできるテーマのこと。オブジェクト思考でいうところの extends(継承)のようなことができる。

- [WordPress子テーマ](https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E)

## 既存テーマ「twentytwenty」 の子テーマを作ってみる

以下のようにディレクトリとファイルを作ってみる。 twentytwenty-child というディレクトリを wp-content/themes 配下に新規作成している。

```css:wp-content/themes/twentytwenty-child/style.css
@charset "utf-8";
/*
 Theme Name:   Twenty Twenty Child
 Theme URI:    http://example.com/twenty-Twenty-child/
 Description:  Twenty Twenty Child Theme
 Author:       takiguchi-yu
 Author URI:   http://example.com
 Template:     twentytwenty
 Version:      0.0.1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentytwenty-child
*/
```

| 項目名      | 説明                                       |
| ----------- | ------------------------------------------ |
| Theme Name  | テーマ名(必須)                             |
| Theme URI   | テーマURL                                  |
| Description | テーマ説明                                 |
| Author      | 作成者                                     |
| Author URI  | 作成者のサイト                             |
| Template    | 既存の親テンプレート(必須)                 |
| Version     | バージョン                                 |
| License     | ライセンス                                 |
| License URI | ライセンスURL                              |
| Tags        | テーマをアップロードしたときに検索にさせる |
| Text Domain | 一意になるテーマ名(必須)                   |

```php:wp-content/themes/twentytwenty-child/functios.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    // 親テーマのスタイルを適用する
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // 子テーマのスタイルも適用する
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
```

できるとこのように管理画面からも作成した子テーマを確認できるようになる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/07e5d2dd-5406-91e8-2ef7-69c88b027194.jpeg" width="500px"></img>

# カスタムフィールド

カスタムフィールドは「任意の項目」をページに含めることができる機能。

- [WordPressカスタムフィールド](https://ja.wordpress.org/support/article/custom-fields/)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/d636417b-5976-f7d0-4c9a-f0f5dfa1e2db.jpeg" width="500px"></img>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/66aba8df-4f1a-7a2d-57b0-35c1b298b0e0.jpeg" width="500px"></img>

### カスタムフィールド取得方法

```php
<!-- ページに設定されているカスタムフィールドをすべて出力 -->
<?php $key="メタデータの名前"; echo get_post_meta( $post->ID, $key, true ); ?>

<!-- 指定したカスタムフィールドを出力 -->
<?php echo post_custom('メタデータの名前') ?>
```

# カスタム投稿

カスタム投稿は、既存のWordPressの「投稿」とは別にカスタマイズした「投稿」を作成できる機能。

- [WordPressカスタム投稿](https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type)

functions.php に 以下をコピって追記する。

```php:wp-content/themes/twentytwenty-child/functios.php
add_action( 'init', 'codex_book_init' );
/**
 * カスタム投稿タイプ book を登録する。
 *
 * @link http://codex.wordpress.org/Function_Reference/register_post_type
 */
function codex_book_init() {
	$labels = array(
		'name'               => _x( 'Books', 'post type general name', 'your-plugin-textdomain' ),
		'singular_name'      => _x( 'Book', 'post type singular name', 'your-plugin-textdomain' ),
		'menu_name'          => _x( 'Books', 'admin menu', 'your-plugin-textdomain' ),
		'name_admin_bar'     => _x( 'Book', 'add new on admin bar', 'your-plugin-textdomain' ),
		'add_new'            => _x( 'Add New', 'book', 'your-plugin-textdomain' ),
		'add_new_item'       => __( 'Add New Book', 'your-plugin-textdomain' ),
		'new_item'           => __( 'New Book', 'your-plugin-textdomain' ),
		'edit_item'          => __( 'Edit Book', 'your-plugin-textdomain' ),
		'view_item'          => __( 'View Book', 'your-plugin-textdomain' ),
		'all_items'          => __( 'All Books', 'your-plugin-textdomain' ),
		'search_items'       => __( 'Search Books', 'your-plugin-textdomain' ),
		'parent_item_colon'  => __( 'Parent Books:', 'your-plugin-textdomain' ),
		'not_found'          => __( 'No books found.', 'your-plugin-textdomain' ),
		'not_found_in_trash' => __( 'No books found in Trash.', 'your-plugin-textdomain' ),
	);

	$args = array(
		'labels'             => $labels,
		'public'             => true,
		'publicly_queryable' => true,
		'show_ui'            => true,
		'show_in_menu'       => true,
		'query_var'          => true,
		'rewrite'            => array( 'slug' => 'book' ),
		'capability_type'    => 'post',
		'has_archive'        => true,
		'hierarchical'       => false,
		'menu_position'      => null,
		'supports'           => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'comments' ),
    'show_in_rest'       => true,
	);

	register_post_type( 'book', $args );
}
```

以下を合わせて追記することで記事投稿時にキャッシュクリアもやってくれる。

```php
function my_rewrite_flush() {
    // 最初に、上記の関数（my_cpt_init）でカスタム投稿タイプ（CPT）を「追加」する。
    // 注意：ここで「追加」と括弧を付けて書いたのは、まだ CPT がデータベースに登録されないため。
    // 後ほど、この CPT の投稿を追加したときに初めて
    // 投稿エントリーの post_type カラム（データベースの列）からのみ CPT が参照される。
    // my_cpt_init();
    codex_book_init();

    // 重要：下記はこの例のプラグイン有効化フックの中で *のみ* 実行される！
    // これをページ読み込みの度に呼び出すことは *絶対に行ってはならない*！！
    flush_rewrite_rules();
}
register_activation_hook( __FILE__, 'my_rewrite_flush' );
```

うまくいくと以下のようにサイドメニューにカスタムした「投稿」が追加される。

![custompost.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/59081/34b81236-d20e-6251-aa39-60868575f3ea.jpeg)

# オリジナルテーマ

オリジナルテーマも作成できる。オリジナルテーマを作成する場合は、 HTML や CSS 、 PHP などプログラムの知識が必要になるためここでは簡単な紹介だけする。

- [WordPressテーマの作成](http://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90)

## テーマを作るために必要なファイル

- Document Head (header.php)
- ナビゲーションメニュー (header.php)
- ウィジェット (sidebar.php)
- フッター (footer.php)
- インデックス (index.php)
- アーカイブ (archive.php)
- 固定ページ (page.php)
- 個別投稿表示 (single.php)
- コメント (comments.php)
- 検索結果表示 (search.php)

[詳細>>](http://wpdocs.osdn.jp/%E3%83%86%E3%83%BC%E3%83%9E%E3%81%AE%E4%BD%9C%E6%88%90#.E3.83.86.E3.83.B3.E3.83.97.E3.83.AC.E3.83.BC.E3.83.88.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AE.E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.AA.E3.82.B9.E3.83.88)