4.モール別ランキングのヘッダー要素のソース内容

「モール別ランキング」アプリのソース解説4回目です。前回は「ランキングページ」のプログラムの流れについて解説しました。今回は「header.php(ヘッダー要素)」のプログラムソースの流れを簡単に解説します。

 

前回の記事

3.モール別ランキングのランキングページのソース内容

アプリURL
モール別ランキング – 大手通販サイトのランキングを比較

 

header.php(ヘッダー要素)

 

画像

 

ソース内容

<?php require_once('module/common_function.php') ?>
<?php
    //各ソーシャルボタンのタイトル、URLの設定
    $site_name='モール別ランキング';
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="大手ネット通販ランキングを比較!楽天、Amazon、Yahooショッピングのランキングを比較して最適な商品を購入しよう。">
    <!-- 表示領域を端末や ブラウザに合わせ、初期倍率を1に設定 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <!-- flatly bootstrap css  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css">
    <link rel="stylesheet" href="/mall-ranking/asset/css/base.css">

    <?php if(empty($_GET['q'])): ?>
        <title><?= $site_name ?> - ネット通販ランキングの比較購入サイト</title>
    <?php else: ?>
        <title><?= h(urldecode($_GET['q'])) ?> -  ネット通販ランキングの比較購入サイト</title>
    <?php endif; ?>
&<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-53156513-28"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-53156513-28');
</script>
lt;/head>
<body>
    <!-- ソーシャルボタン用 facebook sdk -->
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.12&appId=910672038986001&autoLogAppEvents=1';
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <!-- ナビゲーションバー -->
    <div class="navbar navbar-static-top <?= basename($_SERVER['PHP_SELF'])=='ranking.php'?'navbar-default bg-black':'' ?>">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/mall-ranking" class="navbar-brand">
                    <?= $site_name ?>
                </a>
            </div>
            <div class="navbar-collapse collapse" id="navbar-main">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="http://it-ti.work">ITモード</a></li>
                </ul>
            </div>
        </div>
    </div>

プログラムの流れ

1行目:

共通関数ライブラリ「common_function.php」を読み込みます

 

4行目:

タイトル名を設定しています。

 

6行目から33行目:

HTMLのヘッダー要素です。descriptionやtitleを設定しています。19行目でクエリパラメータによりタイトルの変更をしています。クエリパラメータに「q」が含まれていない場合はトップページのタイトルを表示し、含まれている場合はSEO対策として「q」パラメータの内容をタイトルに設定します。

 

25行目〜:

36行目から55行目でbootstrapのナビゲーションバーを設定します。37行目で現在表示中のファイル名を取得し、トップページとランキングページでクラス要素の内容を変えています。

 

次回はfooter.php(フッター要素)のソース内容を紹介します。

 

コメントを残す

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