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. */
}独自ソースはなるべく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');- 管理画面にログイン: WordPressの管理画面にアクセスし、ログインします。
- 設定 > パーマリンク設定: 左側のメニューから、「設定」→「パーマリンク設定」を選択します。
- パーマリンク構造を選択: 以下の5つの基本的な構造から選択できます。
- 基本: デフォルトの設定で、数字によるIDがURLに含まれます。SEOにあまり良くありません。
- 日付と投稿名: 日付と投稿名がURLに含まれます。
- 月と投稿名: 月と投稿名がURLに含まれます。
- 数値ベース: 数字のみで構成されるURLになります。
- 投稿名: 投稿名のみがURLに含まれます。SEOに強く推奨される設定です。
- カスタム構造: 上記のいずれにも当てはまらない場合は、「カスタム構造」を選択し、独自の構造を指定できます。
- 変更を保存: 設定内容に間違いがないことを確認し、「変更を保存」ボタンをクリックします。
投稿ページ、固定ページの作成
（パーマリンクも意味のあるものに設定、パーマリンクがURLになる）
カテゴリーを何個か作成しておく→管理ページからカテゴリーを選んで投稿しておく
固定ページを作成
トップページになるものを作成しておく（空でもよい）
並び順は親ページなら100、子ページなら並び順110で親ページを選択しておく
設定から’ホームページの表示’から作成した固定ページを設定しておく
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>共通パーツ（ヘッダーやメニューバーなど）を共通パーツとして分割
今回は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'); ?>
