デイトラでプログラミング始めました

作業開始前の基本設定

SHARE

目次 非表示

注意　読み込むCSSについて

LocalでWordpress化するときにcssにrootがあると読み込まない

Bootstrapはrootが使ってあるので書きなすか、削除

//:rootはすべて削除
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat",  sans-serif;
  --nav-font: "Raleway",  sans-serif;
}

:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #2b180d; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1b2f45; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #56b8e6; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

CSS,JavaScriptはfunctions.phpで読み込む

独自ソースはなるべくfunctions.phpで読み込みます。

 //header.phpの内部の独自ソースはfunctions.phpで読み込む、以下は削除します。 
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ;?>/assets/css/styles.css" />
  <script type="text/javascript" src="<?php echo get_template_directory_uri() ;?>/assets/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="<?php echo get_template_directory_uri() ;?>/assets/js/bundle.js"></script>



//functions.phpで以下のように読み込む
function theme_enqueue_scripts() {
    // CSSファイルの読み込み
    wp_enqueue_style(
        'theme-styles', // ハンドル名（識別子）
        get_template_directory_uri() . '/assets/css/styles.css', // ファイルのパス
        array(), // 依存関係（なければ空配列）
        '1.0.0', // バージョン（キャッシュ制御のために設定）
        'all' // メディアタイプ
    );

    // jQueryライブラリの読み込み
    wp_enqueue_script(
        'jquery-custom', // ハンドル名
        get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', // ファイルのパス
        array(), // 依存関係
        '3.3.1', // バージョン
        true // フッターで読み込むか（`true`ならフッター）
    );

    // JavaScriptバンドルの読み込み
    wp_enqueue_script(
        'theme-bundle', // ハンドル名
        get_template_directory_uri() . '/assets/js/bundle.js', // ファイルのパス
        array('jquery-custom'), // 依存関係としてカスタムjQueryを指定
        '1.0.0', // バージョン
        true // フッターで読み込む
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_scripts');

パーマリンク設定→おすすめはpost_id

  1. 管理画面にログイン: WordPressの管理画面にアクセスし、ログインします。
  2. 設定 > パーマリンク設定: 左側のメニューから、「設定」→「パーマリンク設定」を選択します。
  3. パーマリンク構造を選択: 以下の5つの基本的な構造から選択できます。
    • 基本: デフォルトの設定で、数字によるIDがURLに含まれます。SEOにあまり良くありません。
    • 日付と投稿名: 日付と投稿名がURLに含まれます。
    • 月と投稿名: 月と投稿名がURLに含まれます。
    • 数値ベース: 数字のみで構成されるURLになります。
    • 投稿名: 投稿名のみがURLに含まれます。SEOに強く推奨される設定です。
  4. カスタム構造: 上記のいずれにも当てはまらない場合は、「カスタム構造」を選択し、独自の構造を指定できます。
  5. 変更を保存: 設定内容に間違いがないことを確認し、「変更を保存」ボタンをクリックします。

トップページの設定

投稿ページ、固定ページの作成

（パーマリンクも意味のあるものに設定、パーマリンクがURLになる）

カテゴリーを何個か作成しておく→管理ページからカテゴリーを選んで投稿しておく
固定ページを作成

トップページになるものを作成しておく（空でもよい）

並び順は親ページなら100、子ページなら並び順110で親ページを選択しておく

設定から’ホームページの表示’から作成した固定ページを設定しておく

ファイル分割(header.php,footer.php,sidebar.php)を作成

index.phpと同じ階層にheader.php,footer.php,sidebar.phpを作成

headとfooterの中身を分割

index.phpで呼び出し

head内でget_header()で呼び出し

//header.phpにhead内を分割
<meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <meta name="keywords" content="共通キーワード" />
  <meta name="description" content="共通ディスクリプション" />
  <title>PACIFIC MALL DEVELOPMENT</title>
  
  <link rel="shortcut icon" href="<?php echo get_template_directory_uri() ;?>/assets/images/common/favicon.ico" />
  <link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Vollkorn:400i" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() ;?>/assets/css/styles.css" />
  <script type="text/javascript" src="<?php echo get_template_directory_uri() ;?>/assets/js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="<?php echo get_template_directory_uri() ;?>/assets/js/bundle.js"></script>
  <!-- headの終わりに wp_head();-->
  <?php wp_head(); ?>

//index.phpで呼び出し
<head>
  <?php get_header(); ?>
</head>

共通パーツをtemplate-partに分割

共通パーツ（ヘッダーやメニューバーなど）を共通パーツとして分割

今回はincludesフォルダの中にパーツを作成

共通パーツを呼び出したい位置でget_template_part(‘)

拡張子は省略

//includes/content-header,includes/content-hero.phpの中に共通パーツを分割
<header id="header">
      <div class="header-inner">
        <div class="logo">
          <a class="logo-header" href="/">
            <img src="<?php echo get_template_directory_uri() ;?>/assets/images/common/logo-main.svg" class="main-logo" alt="PACIFIC MALL DEVELOPMENT" />
            <img src="<?php echo get_template_directory_uri() ;?>/assets/images/common/logo-fixed.svg" class="fixed-logo" alt="PACIFIC MALL DEVELOPMENT" />
          </a>
        </div>
        <button class="toggle-menu js-toggoleNav">
          <span class="toggle-line">メニュー</span>
        </button>
        <div class="header-nav">
          <nav class="global-nav">
            <ul class="menu">
              <li class="menu-item">
                <a class="nav-link active" href="#">ホーム</a>
              </li>
              <li class="menu-item">
                <a class="nav-link" href="#">企業情報</a>
              </li>
              <li class="menu-item">
                <a class="nav-link" href="#">店舗情報</a>
              </li>
              <li class="menu-item">
                <a class="nav-link" href="#">地域貢献活動</a>
              </li>
              <li class="menu-item">
                <a class="nav-link" href="#">ニュースリリース</a>
              </li>
              <li class="menu-item">
                <a class="nav-link" href="#">お問い合わせ</a>
              </li>
            </ul>
          </nav>
          <form class="search-form" role="search" method="get" action="">
            <div class="search-box">
              <input type="text" class="search-input" name="" placeholder="キーワードを入力してください" />
              <button type="submit" class="button-submit"></button>
            </div>
            <div class="search-buttons">
              <button type="button" class="close-icon js-searchIcon"></button>
              <button type="button" class="search-icon js-searchIcon"></button>
            </div>
          </form>
        </div>
      </div>
    </header>

//   共通パーツを呼び出したい位置でget_template_part(')
 <?php get_template_part('includes/content-header'); ?>
    <?php get_template_part('includes/content-hero'); ?>

前の記事

WordPress導入

次の記事

メニューの登録