見出し画像

Webサイトを開発してみる（入門編）ー第4章1.5 ー

TomWorks

ー第4章に戻るー


第4章 1.5 ③ front-page.php のソースコードと詳細

1.5 ③ front-page.php のソースコードと解説　

解説）　front-page.php はトップページを専用に表示するプログラムです。このプログラムを準備することでトップページのみの工夫をすることができ独自の表現ができます

Webサイトのトップページが表示された時にヘッダー部とフッター部に加え、下図の赤線で囲んだ部分（コンテンツ領域）を表示します。（front-page.php はトップページの時にのみ動作します。）

以下が今回のプログラムソースです。

<?php get_header(); ?>

<div class="container-fluid">
    <div id="carouselSample" class="carousel slide carousel-fade" data-bs-ride="carousel">
        <ol class="carousel-indicators">
            <li data-bs-target="#carouselSample" data-bs-slide-to="0" class="active"></li>
            <li data-bs-target="#carouselSample" data-bs-slide-to="1"></li>
            <li data-bs-target="#carouselSample" data-bs-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/top1.jpg" alt="TomWorksトップ画像１" class="img-fluid">
                <div class="carousel-caption d-none d-md-block text-dark">
                    <h4>地域密着</h4>
                    <p>地域に密着した医療を提供します</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/top2.jpg" alt="TomWorksトップ画像２" class="img-fluid">
                <div class="carousel-caption d-none d-md-block text-dark">
                    <h4>予約優先</h4>
                    <p>できるだけ事前にご予約をお願いします</p>
                </div>
            </div>
            <div class="carousel-item">
                <img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/top3.jpg" alt="TomWorksトップ画像３" class="img-fluid">
                <div class="carousel-caption d-none d-md-block text-dark">
                    <h4>インプラント</h4>
                    <p>数多くの実績があります</p>
                </div>
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselSample" role="button" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">前に戻る</span>
        </a>
        <a class="carousel-control-next" href="#carouselSample" role="button" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">次に送る</span>
        </a>
    </div>
</div>
<div class="container">
    <br>
    <div class="row">
        <div class="col-lg-3">
            <?php get_sidebar(); ?>
        </div>
        <div class="col-lg-9">
            <div class="row">
                <div class="col-lg-1"></div>
                <div class="col-lg-auto">
                    <?php if (have_posts()) : ?>
                        <?php while (have_posts()) : the_post(); ?>
                            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                                <?php if (has_post_thumbnail()) : ?>
                                    <?php the_post_thumbnail('tom_eyecatch'); ?>
                                <?php endif; ?>
                                <?php the_content(); ?>
                            </article>
                        <?php endwhile; ?>
                    <?php endif; ?>
                </div>
                <div class="col-lg-1"></div>
            </div>
        </div>
    </div>
</div>

<?php get_footer(); ?>

解説
主なプログラムソースを解説します。

1：<?php get_header(); ?>
get_header()：
ページのヘッダー部を読み込む関数です。
（ここでheader.php を読み込みます。）

4/41：
4 <div id=”carouselSample” class=”carousel slide carousel-fade” data-bs-ride=”carousel”>
5 <ol class=”carousel-indicators”>
6 <li data-bs-target=”#carouselSample” data-bs-slide-to=”0″ class=”active”></li>
7 <li data-bs-target=”#carouselSample” data-bs-slide-to=”1″></li>
8 <li data-bs-target=”#carouselSample” data-bs-slide-to=”2″></li>
9 </ol>
10 <div class=”carousel-inner“>
11 <div class=”carousel-item active“>
12 <img src=”<?php echo esc_url(get_template_directory_uri()); ?>/img/top1.jpg” alt=”TomWorksトップ画像１” class=”img-fluid“>
13 <div class=”carousel-caption d-none d-md-block text-dark”>
14 <h4>地域密着</h4>
15 <p>地域に密着した医療を提供します</p>
16 </div>
17 </div>
18 <div class=”carousel-item“>
19 <img src=”<?php echo esc_url(get_template_directory_uri()); ?>/img/top2.jpg” alt=”TomWorksトップ画像２” class=”img-fluid“>
20 <div class=”carousel-caption d-none d-md-block text-dark”>
21 <h4>予約優先</h4>
22 <p>できるだけ事前にご予約をお願いします</p>
23 </div>
24 </div>
25 <div class=”carousel-item“>
26 <img src=”<?php echo esc_url(get_template_directory_uri()); ?>/img/top3.jpg” alt=”TomWorksトップ画像３” class=”img-fluid“>
27 <div class=”carousel-caption d-none d-md-block text-dark”>
28 <h4>インプラント</h4>
29 <p>数多くの実績があります</p>
30 </div>
31 </div>
32 </div>
33 <a class=”carousel-control-prev” href=”#carouselSample” role=”button” data-bs-slide=”prev”>
34 <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>
35 <span class=”visually-hidden“>前に戻る</span>
36 </a>
37 <a class=”carousel-control-next” href=” #carouselSample ” role=”button” data-bs-slide=”next”>
38 <span class=”carousel-control-next-icon” aria-hidden=”true”></span>
39 <span class=”visually-hidden“>次に送る</span>
40 </a>
41 </div>

☆ Bootstrapのカルーセル機能を使用して、横方向に循環するスライドショー（画面の黄色線の部分）を表示します。ここでは3枚のスライドを順に表示します。

4 <div id=”carouselSample” class=”carousel slide carousel-fade” data-bs-ride=”carousel”>：
BootstapのCSSクラス「carousel」と「 slide」に data-bs-ride=”carousel”を追加しカルーセルの外枠を定義します。carousel-fade クラスを追加することでスライドをフェードに変更します。

5 <ol class=”carousel-indicators”>：
ol要素にcarousel-indicators を設定しカルーセルにスライド数をカウントするインジケーター（横棒3本）を表示します。

6 <li data-bs-target=”#carouselSample” data-bs-slide-to=”0″ class=”active”></li>：
data-bs-target属性（”#carouselSample”）は4行目で定義したカルーセルの外枠のidと一致させます。 data-bs-slide-to=”0″ でスライド番号を定義します。（スライド番号は0から始めます。）初期画面で表示するスライドに対応するli要素に active クラスを加えます。7行目、8行目にスライド番号を変えて追加します。

10 <div class=”carousel-inner“>：
カルーセルの内枠として複数のスライドをまとめるためここでcarousel-innerクラスを定義します。

11 <div class=”carousel-item active“>：
3枚のスライドそれぞれに carousel-itemクラスを定義します。（11、18、25行目）active クラスは初期画面で表示するスライド（11行目）にのみ設定します。（active クラスは必ず1枚のスライドに設定しましょう。）

12 <img src=”<?php echo esc_url(get_template_directory_uri()); ?>/img/top1.jpg” alt=”TomWorksトップ画像１” class=”img-fluid“>：
Bootstrapの img-fluid クラスを追加して画像をレスポンシブに対応させます。

33～40行目にてスライドを前後に移動させるコントローラー機能を追加します。

33 <a class=”carousel-control-prev” href=”#carouselSample” role=”button” data-bs-slide=”prev“>：
a要素にcarousel-control-prevクラス、href=にカルーセル外枠のid（”#carouselSample“）を定義し、data-bs-slide=”prev“とすることでスライドを前に送る機能を実現します。

34 <span class=”carousel-control-prev-icon” aria-hidden=”true”></span>：
span機能にcarousel-control-prev-iconを定義し「＜」アイコンを表示します。

35 <span class=”visually-hidden“>前に戻る</span>：
visually-hidden クラスを定義して「前に戻る」を非表示テキストとして追加しておきます。

37～39行目で同様にスライドを後に送る機能を実現します。



46：<div class=”col-lg-3“>
col-lg-3 ：
BootstrapのCSSクラスです。ページの中央部分を12分割したうちの左3分割分をサイドバー（画面の緑線の部分）のために確保します。

47：<?php get_sidebar(); ?>
get_sidebar()：
ページのサイドバー（画面の緑線の部分）を読み込む関数です。
（ここでsidebar.php を読み込みます。）

49：<div class=”col-lg-9“>
col-lg-9：
46行目と同じくBootstrapのCSSクラスです。ページの中央部分を12分割したうちの右9分割分を記事領域（画面の青線の部分）のために確保します。

53/62：
53 <?php if (have_posts()) : ?>
54 <?php while (have_posts()) : the_post(); ?>
55 <article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
56 <?php if (has_post_thumbnail()) : ?>
57 <?php the_post_thumbnail(‘tom_eyecatch’); ?>
58 <?php endif; ?>
59 <?php the_content(); ?>
60 </article>
61 <?php endwhile; ?>
62 <?php endif; ?>

☆ ページの記事領域にWordPressの固定ページや投稿記事などを表示します。

53 if (have_posts())：
WordPressの記事があるかどうかを判定します。

54 while (have_posts()) : the_post()：
WordPressの記事がある間は記事を1件ずつ取り出すループです。（61行目のendwhileまでを繰り返します。）

55 the_ID()、post_class()：
現在の記事（投稿または固定ページ）のIDとそのクラス属性を出力します。

56 if (has_post_thumbnail()
57 the_post_thumbnail(‘tom_eyecatch’)：
現在の記事にアイキャッチ画像の設定があるかを確認し、ある場合はその画像を表示します。
尚、functions.phpにて、
6 add_theme_support(‘post-thumbnails’)
9 add_image_size(‘tom_eyecatch’, 640, 480, true)
と定義しアイキャッチ画像を有効化、及び tom-eyecatch のサイズを設定しています。（但しこのトップページで表示される固定ページ記事の「Home」ではアイキャッチ画像は未設定ですので表示されません。）

59 the_content()：
現在の記事の内容を表示します。
（このトップページのHomeでは「最新の投稿」ブロックが設定されているため各投稿記事のアイキャッチ画像が表示されます。解像度にサムネイルを選択しているので150＊150となります。ーWordPress管理画面の「設定」>「メディア」）


70：<?php get_footer(); ?>
get_footer()：
ページのフッター部を読み込む関数です。
（ここでfooter.php を読み込みます。）

この記事が気に入ったらサポートをしてみませんか？