ワードプレスその３メインループとサブループ

ワードプレスその３　メインループとサブループ

あんぽんたん

2022-05-02

サンプルをダウンロード

今回も、WordPress化したいファイルをこちらで用意いました！
まずは、そのファイルのダウンロードからしていこう！
ダウンロード

ダウンローが出来たら、themesフォルダの中に入れよう！
下の手順を見ながら一緒にどこにいれればいいのかを確認していこう！

操作手順その１：フォルダーの入れ先

「C:\xampp\htdocs\wp-practice\wo-content\themes」の中に
「company-theme」フォルダを入れよう！

メインループ

今回は、Wordプレスのループを中心に説明していくよ！
メインループとサブループがあるけど先にメインループ
を説明していくよ！

メインループの解説1

メインループの解説2

メインループの解説3

メインループの解説3

メインループの解説4

メインループの解説5

これを踏まえた上でメインループをindex.phpに記載してみよう！

操作手順その２：index.php



<?php get_header(); ?>
<main>
    <div class="main-content">
        <div class="main-inner">
            <section class="introduced">
                <img src="<?php echo get_template_directory_uri() ?>/image/bg-education.jpg" alt="">
                <h2>あなたに合ったやり方で<br>夢をかなえる</h2>
                <p>Make your dreams come true in a way that works for you. </p>
            </section>
            <section class="thoughts">
                <h2>株式会社Abunodisceomnesの想い</h2>
                <p>現在、あらゆるITスクールにおいて、様々な教育がなされていますが、理解ではなく、転職に重きを置きすぎて、結果として、転職後の挫折率が50％を超えています。
                    株式会社Abunodisceomnesでは、挫折しない、どこにでも通用するエンジニアを育てるために教育を目指しています。</p>
            </section>


            <section class="service">
                <h2>サービス</h2>
                <?php if (have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>
                        <div class="service-flex">
                            <section class="service-list">
                                <a href="<?php the_permalink(); ?>">
                                    <div class="service-img"><?php if (has_post_thumbnail()) : ?>
                                            <?php the_post_thumbnail(); ?>
                                        <?php else : ?>
                                            <img src="<?php echo get_template_directory_uri(); ?>/img/no-images.png" alt="no-img">
                                        <?php endif; ?>
                                    </div>
                                    <h3> <?php
                                            if (mb_strlen($post->post_title, 'UTF-8') > 30) {
                                                $title = mb_substr($post->post_title, 0, 30, 'UTF-8');
                                                echo $title . '…';
                                            } else {
                                                echo $post->post_title;
                                            }
                                            ?></h3>
                                    <p><?php echo mb_substr(get_the_excerpt(), 0, 66, 'UTF-8'); ?></p>
                                </a>
                            </section>
                        <?php endwhile; ?>
                    <?php else : ?>
                        <p>投稿が見つかりません。</p>
                    <?php endif; ?>
                        </div>
                        <a href="" class="service-list-link">サービス一覧へ</a>
            </section>
            <section class="news">
                <div class="news-flex">
                    <h2>ニュース</h2>
                    <a href="">ニュース一覧</a>
                </div>
                <article class="news-container-article">
                    <a href=""><span class="date">2020/01/31</span>:<span class="detail">会社を創設したでやんす</span></a>
                </article>
                <article class="news-container-article">
                    <a href=""><span class="date">2020/01/31</span>:<span class="detail">侵入社員が入りました！</span></a>
                </article>
                <article class="news-container-article">
                    <a href=""><span class="date">2020/01/31</span>:<span class="detail">侵入社員が入りました！</span></a>
                </article>
            </section>
            <section class="blog">
                <h2>ブログ</h2>
                <div class="blog-flex">
                    <article class="blog-article">
                        <a href="">
                            <img src="./image/bg-education.jpg" alt="">
                            <p class="blog-date">2019/12/12</p>
                            <h3 class="blog-detail">新しいメンバーが入りました</h3>
                        </a>
                    </article>
                    <article class="blog-article">
                        <a href="">
                            <img src="./image/bg-education.jpg" alt="">
                            <p class="blog-date">2019/12/12</p>
                            <h3 class="blog-detail">新しいメンバーが入りました</h3>
                        </a>
                    </article>
                    <article class="blog-article">
                        <a href="">
                            <img src="./image/bg-education.jpg" alt="">
                            <p class="blog-date">2019/12/12</p>
                            <h3 class="blog-detail">新しいメンバーが入りました</h3>
                        </a>
                    </article>
                </div>
                <a href="" class="blog-list-link">ブログ記事一覧へ</a>
            </section>
            <section class="company-recruit-content">
                <a class="company">
                    会社概要
                </a>
                <a class="recruit">
                    採用情報
                </a>
            </section>
            <section class="inquiry-content">
                <h2>お問合せ</h2>
                <div class="inquiry-detail">
                    <h3>サービス内容や採用情報等に関してはお問合せにて承っております。</h3>
                    <a href="" class="inquiry-link">お問合せ</a>
                </div>
            </section>
        </div>
    </div>
</main>
<?php get_footer(); ?>

操作手順その３：アイキャッチ画像の有効化

操作手順その４：functions.phpに追加コード



<?php
function company_enqueue_styles()
{
  wp_enqueue_style('reset-sheet', get_template_directory_uri() . "/css/reset.css");
  wp_enqueue_style('main-style-sheet', get_template_directory_uri() . "/style.css");
}
add_action('wp_enqueue_scripts', 'company_enqueue_styles');


function company_enqueue_scripts()
{
  wp_enqueue_script(
    'main-js-sheet',
    get_template_directory_uri() . '/js/common.js',
    array(),
    false,
    true
  );
}
add_action('wp_enqueue_scripts', 'company_enqueue_scripts');

add_filter('show_admin_bar', '__return_false');

//アイキャッチ画像の有効化
add_theme_support('post-thumbnails');

メインループの書き方は大丈夫かな！？
新規投稿から投稿して投稿した記事が反映されているかを見ておこう！

サブループ

続いてサブループについて見ていくよ！
　　正直、こちらのほうが使い勝手がかなりいいから、最初はサブループから
　　覚えてもいいかもしれないね！

サブループ解説１

サブループ解説２

操作手順その５：index.phpにサブループを反映させよう



<?php get_header(); ?>
<main>
    <div class="main-content">
        <div class="main-inner">
            <section class="introduced">
                <img src="<?php echo get_template_directory_uri() ?>/image/bg-education.jpg" alt="">
                <h2>あなたに合ったやり方で<br>夢をかなえる</h2>
                <p>Make your dreams come true in a way that works for you. </p>
            </section>
            <section class="thoughts">
                <h2>株式会社Abunodisceomnesの想い</h2>
                <p>現在、あらゆるITスクールにおいて、様々な教育がなされていますが、理解ではなく、転職に重きを置きすぎて、結果として、転職後の挫折率が50％を超えています。
                    株式会社Abunodisceomnesでは、挫折しない、どこにでも通用するエンジニアを育てるために教育を目指しています。</p>
            </section>


            <section class="service">
                <h2>サービス</h2>
                <div class="service-flex">
                    <?php
                    $service_query = new WP_Query(
                        array(
                            'post_type'      => 'post',
                            'category_name' => 'service',
                            'posts_per_page' => 3,
                        )
                    );
                    ?>
                    <?php if ($service_query->have_posts()) : ?>
                        <?php while ($service_query->have_posts()) : ?>
                            <?php $service_query->the_post(); ?>
                            <section class="service-list">
                                <a href="<?php the_permalink(); ?>">
                                    <div class="service-img"> <?php if (has_post_thumbnail()) : ?>
                                            <?php the_post_thumbnail(); ?>
                                        <?php else : ?>
                                            <img src="<?php echo get_template_directory_uri(); ?>/img/no-images.png" alt="no-img">
                                        <?php endif; ?>
                                    </div>
                                    <h3><?php
                                        if (mb_strlen($post->post_title, 'UTF-8') > 30) {
                                            $title = mb_substr($post->post_title, 0, 30, 'UTF-8');
                                            echo $title . '…';
                                        } else {
                                            echo $post->post_title;
                                        }
                                        ?></h3>
                                    <p><?php echo mb_substr(get_the_excerpt(), 0, 66, 'UTF-8'); ?></p>
                                </a>
                            </section>
                        <?php endwhile; ?>
                    <?php endif; ?>
                    <?php wp_reset_postdata(); ?>
                </div>
                <a href="" class="service-list-link">サービス一覧へ</a>
            </section>
            <section class="news">
                <div class="news-flex">
                    <h2>ニュース</h2>
                    <a href="">ニュース一覧</a>
                </div>
                <article class="news-container-article">
                    <a href=""><span class="date">2020/01/31</span>:<span class="detail">会社を創設したでやんす</span></a>
                </article>
                <article class="news-container-article">
                    <a href=""><span class="date">2020/01/31</span>:<span class="detail">侵入社員が入りました！</span></a>
                </article>
                <article class="news-container-article">
                    <a href=""><span class="date">2020/01/31</span>:<span class="detail">侵入社員が入りました！</span></a>
                </article>
            </section>
            <section class="blog">
                <h2>ブログ</h2>
                <div class="blog-flex">
                    <?php
                    $blog_query = new WP_Query(
                        array(
                            'post_type'      => 'post',
                            'category_name' => 'blog',
                            'posts_per_page' => 4,
                        )
                    );
                    ?>
                    <?php if ($blog_query->have_posts()) : ?>
                        <?php while ($blog_query->have_posts()) : ?>
                            <?php $blog_query->the_post(); ?>
                            <article class="blog-article">
                                <a href="<?php the_permalink(); ?>">
                                    <?php if (has_post_thumbnail()) : ?>
                                        <?php the_post_thumbnail(); ?>
                                    <?php else : ?>
                                        <img src="<?php echo get_template_directory_uri(); ?>/img/no-images.png" alt="no-img">
                                    <?php endif; ?>
                                    <p class="blog-date"><?php echo get_the_date('Y-m-d'); ?></p>
                                    <h3 class="blog-detail"> <?php
                                                                if (mb_strlen($post->post_title, 'UTF-8') > 30) {
                                                                    $title = mb_substr($post->post_title, 0, 30, 'UTF-8');
                                                                    echo $title . '…';
                                                                } else {
                                                                    echo $post->post_title;
                                                                }
                                                                ?></h3>
                                </a>
                            </article>
                        <?php endwhile; ?>
                    <?php endif; ?>
                    <?php wp_reset_postdata(); ?>
                </div>
                <a href="" class="blog-list-link">ブログ記事一覧へ</a>
            </section>
            <section class="company-recruit-content">
                <a class="company">
                    会社概要
                </a>
                <a class="recruit">
                    採用情報
                </a>
            </section>
            <section class="inquiry-content">
                <h2>お問合せ</h2>
                <div class="inquiry-detail">
                    <h3>サービス内容や採用情報等に関してはお問合せにて承っております。</h3>
                    <a href="" class="inquiry-link">お問合せ</a>
                </div>
            </section>
        </div>
    </div>
</main>
<?php get_footer(); ?>

操作手順その６：投稿してみよう！

カテゴリー名blogで1記事
カテゴリー名serviceで1記事を作成しよう！

操作手順その７：設定が反映されているか確認しよう！

お問合せフォームの設定をしよう！

サブループで記事はきちんと反映されたかな！？
次は、お問合せフォームを仕上げて行くのだけど、その前に固定ページの設定をしていくよ！

操作手順その８：固定ページの作成

操作手順その９：page-contact.php



<?php
/*
Template Name: お問い合わせ
*/
?>
<?php get_header(); ?>
<main>
    <div class="inquisition-content">
        <div class="inquisition-content-inner">
            <div class="inquisition-content-heading">
                <img src="https://images2.imgbox
.com/a5/2e/m3lRbCCA_o.jpg" alt="">
                <h2>CONTACT</h2>
                <p>下記のフォームにご入力下さい</p>
            </div>
            <form action="">
                <div class="inquisition-content-form">
                    <div class="inquisition-content-form_item">
                        <div>会社名</div>
                        <div><input type="text"></div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>部署名</div>
                        <div><input type="text"></div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>氏名</div>
                        <div><input type="text"></div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>フリガナ</div>
                        <div><input type="text"></div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>メールアドレス</div>
                        <div><input type="text"></div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>電話番号</div>
                        <div><input type="text"></div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>コメント</div>
                        <div><textarea name="" id="" cols="24" rows="10"></textarea></div>
                    </div>
                    <div class="submit"><button class="submit-button">送信</button></div>
                </div>
            </form>
        </div>
    </div>
</main>
<?php get_footer(); ?>

操作手順その１０：固定ページの作成

コンタクトフォームの有効化

次は、お問合せフォームを完成させるためのプラグインを導入していくよ！
今回使うプラグインは、よく使われるプラグインだから使い方をよく覚えておこう！

操作手順その１１：コンタクトフォーム７の有効化

操作手順その１２：コンタクトフォーム７の日本語化
まずは、日本語化ファイルのダウンロードからしていこう！
ダウンロード

操作手順その１３：コンタクトフォームの実装
まずは、日本語化ファイルのダウンロードからしていこう！
ダウンロード

操作手順その１４：inputタグの置き換え

操作手順その１５：page-contact.phpのカスタマイズ



<?php
/*
Template Name: お問い合わせ
*/
?>
<?php get_header(); ?>
<main>
    <div class="inquisition-content">
        <div class="inquisition-content-inner">
            <div class="inquisition-content-heading">
                <img src="https://images2.imgbox
.com/a5/2e/m3lRbCCA_o.jpg" alt="">
                <h2>CONTACT</h2>
                <p>下記のフォームにご入力下さい</p>
            </div>
            <form action="">
                <div class="inquisition-content-form">
                    <div class="inquisition-content-form_item">
                        <div>会社名</div>
                        <div>[text* text-company_name]</div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>部署名</div>
                        <div>[text* text-busyo]</div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>氏名</div>
                        <div>[text* text-name]</div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>フリガナ</div>
                        <div>[text* text-furigana]</div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>メールアドレス</div>
                        <div>[email* email-825]</div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>電話番号</div>
                        <div>[tel* tel-393]</div>
                    </div>
                    <div class="inquisition-content-form_item">
                        <div>コメント</div>
                        <div>[textarea* textarea-comment]</div>
                    </div>
                    <div class="submit">[submit]</div>
                </div>
            </form>
        </div>
    </div>
</main>
<?php get_footer(); ?>

操作手順その１６：コンタクトフォームのカスタマイズ１

操作手順その１７：コンタクトフォームのカスタマイズ２

操作手順その１８：page-contact.phpのカスタマイズ



<?php
/*
Template Name: お問い合わせ
*/
?>
<?php get_header(); ?>
<main>
    <div class="inquisition-content">
        <div class="inquisition-content-inner">
            <div class="inquisition-content-heading">
                <img src="https://images2.imgbox.
com/a5/2e/m3lRbCCA_o.jpg" alt="">
                <h2>CONTACT</h2>
                <p>下記のフォームにご入力下さい</p>
            </div>
            <form action="">
            <?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
            </form>
        </div>
    </div>
</main>
<?php get_footer(); ?>