Home
Web
WordPress
WordPressでの独自テーマ作成＃2（プラグイン・テーマ導入）

WordPressでの独自テーマ作成＃2（プラグイン・テーマ導入）

WordPress

2022/09/30 2022/10/08

成瀬晴都

今回やること
テーマ・プラグインの追加
テーマの確認
子テーマの作成
簡易サイトをWordPressへ移行
- サンプルサイトのダウンロード
- ファイルの作成
- サイトの移行
  - blankslate-child/css/style.css
  - blankslate-child/img/
  - blankslate-child/functions.php
  - blankslate-child/header.php
  - blankslate-child/front-page.php
  - blankslate-child/footer.php
- 確認
さいごに

今回やること

テーマ「BlankSlate」の追加
プラグイン「Advanced Custom Fields」の追加
プラグイン「Contact Form 7」の追加
子テーマ作成
簡易サイトをWordPressへ移行

テーマ・プラグインの追加

前回の記事で、インストールから管理画面の基本設定までを行いました。

前回と同様、「ADMIN」をクリックし、管理者画面に移動します。

テーマを追加したいので、左側の欄から外観の中にあるテーマをクリックし、新規追加からzip又はオンラインでサイトの親テーマとなる「BlankSlate」を追加し、有効化してください。

プラグインも追加するので、左側の欄からプラグインの中にある新規追加からzip又はオンラインで投稿や固定ページの入力項目をカスタマイズできる「Advanced Custom Fields」と、簡単に問い合わせフォームを追加できる「Contact Form 7」を追加し、有効化してください。

テーマの確認

ここからはコードを書いていきます。

Localの最初の画面に戻り作業フォルダの場所を探します。

サイト名の下に→『＞』と書かれている部分をclickするとWordPressのフォルダの場所が開かれ、最初に「app」、「conf」、「logs」と書かれフォルダがあり、「app」を開くと「public」フォルダがあるので、この中身を変更していきます。

「blankslate」テーマが追加できていたら、親テーマとなる「wp-content」＞「themes」＞「blankslate」があるので中身を確認します。

今回必要となるファイルは以下のファイルになります。

テンプレートファイル
- single.php
- front-page.php
- archive.php
共通パーツファイル
- header.php
- footer.php
その他ファイル・フォルダ
- function.php
- style.css
- imgフォルダ
- cssフォルダ

子テーマの作成

ひとつ前の「themes」に戻り「blankslate」フォルダがある同じ階層に、この記事ではblankslate-childという名前を使いますが、自由な名前でフォルダを作成してください。

blankslate-childの中にstyle.cssを作成します。

/*
Theme Neme: blankslate-child
Template:blankslate
*/

中身は、

Theme Name:にはテンプレート名

Template:には親テーマ名

管理画面に戻りテーマ一覧画面を確認すると、今書いたテンプレート名のテーマが追加されています。

style.cssはテーマを動作させるためのファイルで、「コメントヘッダー」という書式で、テーマ名や作者名などの情報を設定します。

簡易サイトをWordPressへ移行

サンプルサイトのダウンロード

sample-wp ダウンロード

このzipファイルの中にサンプルで作ったサイトがあるのでダウンロードしてください。

このサンプルサイトを元にテーマを作っていきます。

ファイルの作成

先ほど作った「blankslate-child」の中にファイル、フォルダを作っていきます。

blankslate-child
- css(スタイル用フォルダ)
- img(画像素材用フォルダ)
- functions.php
- single.php
- front-page.php
- archive.php
- header.php
- footer.php
- style.css（コメントヘッダー設定用）

サイトの移行

blankslate-child/css/style.css

サンプルサイトのCSSを丸々コピー

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

...

.c-form__button input[type="submit"]:hover,
.c-form__button button:hover{
  opacity: 0.8;
}

blankslate-child/img/

img_01～img_06、mainvisual.jpgをコピーしてください。

blankslate-child/functions.php

<?php
function theme_name_scrips() {
  wp_enqueue_style('style01',get_theme_file_uri("/css/style.css"));
}

add_action('wp_enqueue_scripts','theme_name_scrips');

PHPを閉じる「?>」は必要ないです。

ここでパスが書かれたcssのスタイルが反映されます。

'style01'の部分は好きな名前で大丈夫です。

functions.phpでは、テーマ内で使う関数の定義や管理画面の設定などをすることができます。

blankslate-child/header.php

親テーマのheader.phpをコピーとボディー以下の部分にサンプルサイトのヘッダー部分HTMLを貼り付けました。

このphpは共通のヘッダーの役割をします。

<!DOCTYPE html>
<html <?php language_attributes(); ?> <?php blankslate_schema_type(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width" />
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <header class="l-header">
        <h1 class="l-header__title">タイトル</h1>
        </div>
        <nav class="l-header__nav">
            <ul>
                <li>
                    <a href="#">お知らせ</a>
                </li>
                <li>
                    <a href="#">製品情報</a>
                </li>
                <li>
                    <a href="#">お問い合わせ</a>
                </li>
            </ul>
        </nav>
    </header>

blankslate-child/front-page.php

このphpはメインコンテンツ部分を表示させる役割になります。

大事なのは、

<?php get_header(); ?>

<?php get_footer(); ?>

これを忘れるとヘッダー、フッダーが表示されません。

mainの中身はサンプルサイトと同じです。

<?php get_header(); ?>
<main class="l-body">
    ...
</main>
<?php get_footer(); ?>

blankslate-child/footer.php

親テーマのfooter.phpをコピーとボディー以下の部分にサンプルサイトのフッター部分HTMLを貼り付けました。

このphpは共通のフッターの役割をします。

<footer class="l-footer">
    <p>©2022 STEMASK Blog</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

確認

管理画面左上、メーターっぽいアイコンのところからサイトを確認してみましょう！

画像はパスの問題で表示されていませんが、その他のコンテンツにはしっかりスタイルが反映されていると思います。

パスの問題は次回の記事で直します。

このように表示されていたら、今回やることは一通り完成です。

さいごに

今回の記事では、サンプルサイトをWordPressに移行させて表示までをやりました。

次回の記事では、絞り込みや機能的な部分をつけ足ししていきます。

WordPressでの独自テーマ作成＃1（環境構築）

WordPressでの独自テーマ作成＃3（投稿記事の表示）