wordpress

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です。これで子テーマの準備は完了しました。

 

 

➍子テーマの有効化

 

WordPress管理画面⇒外観⇒テーマから子テーマを有効化して、完了です。
(テーマのサムネイルが透明ですので、気になる場合は screenshot.png を子テーマのディレクトリにアップします。)

 

これでテーマのインストールができました。

 

2.子テーマの下準備をします

 

親テーマからPHPファイルのコピー

 
カスタマイズするphpファイルを、親テーマからコピーして編集し、子テーマのディレクトリにアップします。

例えば、「header.php」、「page.php」、「footer.php」などカスタマイズを行いたいphpファイルをコピーします。

カスタマイズしないphpファイルはコピー不要です。

今回は、「single.php」「archive.php」をコピーします。
 

➊single.phpのコピー

 
選手紹介メンバー紹介
「single.php」をコピーして「single-member.php」という名前に変更します。

これで、選手紹介、メンバー紹介専用のページを作ることが出来ました。

ちなみに「選手紹介・メンバー紹介」で使用するページを他の投稿ページとデザインを変更したい場合にも対応することが出来ました。
 

➋archive.phpのコピー

 
選手一覧メンバー一覧
「archive.php」をコピーして「archive-member.php」という名前に変更します。

これで、選手一覧、メンバー一覧専用のページを作ることが出来ました。

ちなみに、「選手一覧・メンバー一覧」で使用するページを他の投稿ページ一覧とデザインを変更したい場合にも対応することが出来ました。
 

次は、カスタム投稿タイプを追加します。

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



-wordpress
-, , , ,


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

カスタム投稿

【サンプル】プラグインなしでカスタム投稿タイプを複数作る

  あまりWordPressをテクっていない私が、今回はプラグインなしでカスタム投稿タイプを作ってみました。 たぶん、詳しい人からするとかなり簡単にできてしまうんだと思いますが、 詳しい人ほ …

カスタムメニュー

WordPress(ワードプレス)でメニューを分ける

    メニューを追加してみる   WordPress管理メニューにある【外観】→【メニュー】に進むとそれぞれのメニューを登録することができますが、今回はあえてメニューを …

画像を上下中央に配置

指定した範囲内に画像を上下中央に配置

  divなどで指定した部分に、画像を配置 上下中央にする方法は他にもありますが、 今回は、『position』を使ってみます。   html <div class=&quo …

CSSのcolumnでカテゴリー一覧ページにランダム表示

CSSのcolumnでカテゴリー一覧ページにランダム表示

  アーカイブの一覧表示をランダムにする   前回の記事に関連して、今回はアーカイブのページで試してみたいと思います。 カテゴリーなどの一覧表示に使用する『archive.php』 …

ワードプレス

All in One SEO Packで XMLサイトマップをGoogleに 送信する方法

  ワードプレスのプラグインで超有名な『All in One SEO Pack』ですが、必ず入れたいプラグインの1つです。 その名前の通り、SEO関係の機能が一つにまとまっているので、かなり …