WordPress テーマLIQUID PRESSでメンバー紹介や選手一覧などを作ってみた① |

メンバー紹介選手紹介

WordPressでスポーツチームやサークルのメンバー紹介や選手紹介または、企業やショップなどの人物紹介などのページを作るときに行う方法として、Web製作者それぞれやり方はあると思いますが、独学で学んだ私が作った方法を紹介したいと思います。

前回は、WordPressの公式テーマである「Twenty Sixteen」で作ってみましたが、

今回は、日本語対応レスポンシブWordPressテーマ「LIQUID PRESS」で行いたいと思います。

ちなみに、WordPressのバージョンは、4.9.1です。

1.テーマのインストール

こちらからダウンロードして使いました⇒WordPressテーマならLIQUID PRESS

ダウンロードした圧縮ファイルを外観⇒テーマ⇒新規追加⇒テーマのアップロード⇒ファイルを選択⇒今すぐインストール

インストールができたら続いて子テーマを作ります。

LIQUID PRESS 子テーマの作り方

子テーマの作り方は、公式サイトの使い方ガイドにもあります。⇒WordPressテーマならLIQUID PRESS

カスタマイズをしていくには、子テーマを使う方法が便利で簡単に、しかも安心して出来ますのでおすすめです。

❶子テーマのフォルダを作成

FTPなどで、/wp-content/themes/ に子テーマのディレクトリを作成します。

ちなみに、LIQUID PRESSのテーマをインストールしているなら、/wp-content/themes/liquid のような感じであると思います。

「liquid」が親テーマなら

「liquid-child」という名前で子テーマフォルダを作ります。

➋style.cssを作成

子テーマのstyle.cssを作成します。ここでテーマの情報を定義します。
ポイントは下記の2点です。

Template: liquid – 親テーマのディレクトリ名を指定（空白NG）
Theme Name: liquid-child – 子テーマの名前を指定（空白OK）

@charset "utf-8";
/*
Template: liquid
Theme Name: liquid-child
*/

➌functions.phpを作成

子テーマのfunctions.phpを作成します。

ここではテーマのCSSを指定します。ポイントは array で先に読み込むCSSを指定する点です。
（LIQUID PRESS シリーズでは、bootstrap、icomoon を使用しているのでこれらを先に読み込みます。）

<?php
 // 親テーマと子テーマのCSSを読み込み
 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
 function theme_enqueue_styles() { wp_enqueue_style( 'liquid-style', get_template_directory_uri() . '/style.css', array('bootstrap', 'icomoon') );
 wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('liquid-style') );
 }
 ?>

基本的には上記をコピペでOKです。これで子テーマの準備は完了しました。