前回から色々試行錯誤していたのですが, ひと段落(?)したのでメモを残しておきます.
前回の記事はこちら.
dai7igarashi.hatenablog.com
テーマから作成
作ったサイトはこちらです.
YouTube編集教室YES | 小学生向け!夏のイベント開催中!
( ↑ よくあるご質問のデザインは友達です)
WordPressには素敵なテーマがたくさんありましたが, どうも手を加えようとすると難しい部分がありました. なので自分でテーマから作成しました.
最低限必要なファイル
今回のデザインとしてはフロントページ があって基本はそこでランディング, 予約フォームや一部のページだけルーティングって感じです. これを実現するために以下のファイルを作成しました.
- index.php : 必須
- style.css : 必須
- header.php : ヘッダー記述用
- nav.php : ナビゲーションバー用
- front-page.php : ホームのページ用
- page.php : 個別ページの内容表示用
- footer.php : フッター用
- function.php : 外部ファイルの読み込みなど用
nav.php以外はwordpress側がファイル名を自動で認識して役割や表示の優先順位を決めてくれます. nav.phpは今回自分で作ったファイルです. 自作のphpファイルは<?php get_template_part('nav'); ?>のように記述すれば読み込めます.
各ファイルの基本の記述
具体的なコンテンツ部分を除いた記述は以下のようになりました.
テーマ作成に関して, こちらの記事を参考にさせていただきました.
plusers.net
<!-- header.phpを呼び出し -->
<?php get_header(); ?>
<!-- bootstrap4を使用したのでcontainer指定しとく -->
<div class="container">
<!-- 自作のnav.phpを呼び出し -->
<?php get_template_part( 'nav' ); ?>
</div>
<!-- footer.phpを呼び出し -->
<?php get_footer(); ?>
style.php
@charset "utf-8";
/*
Theme Name: myTheme ←必須
Author: hogehoge taro
*/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- レスポンシブルデザインに対応させる -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- header.phpを呼び出し -->
<?php wp_head(); ?>
</head>
<!-- wordpressが読み込みファイルを扱いやすいようにしてる? -->
<body <?php body_class(); ?>>
nav.php
固定のナビゲーションバー
wordpressに共通して言えることはないので割愛
front-page.php
<?php get_header(); ?>
<!-- コンテンツ -->
<?php get_template_part( 'nav' ); ?>
<!-- コンテンツ -->
<?php get_footer(); ?>
page.php
<?php get_header(); ?>
<div class="container">
<?php get_template_part( 'nav' ); ?>
<!-- データベースに保存された固定ページの内容を取得 -->
<!-- ※投稿と違っていくつものコンテンツを取ってこなのでwhileは不要かも... -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
<footer>
<div class="copyright">
<p class="text-center">copyright ©<?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>
function.php
<?php
add_theme_support( 'title-tag' );
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-thumbnails' );
function my_scripts() {
// wp標準のjQueryは使用しない
wp_deregister_script('jquery');
wp_enqueue_script('jq', "https://code.jquery.com/jquery-3.3.1.min.js");
wp_enqueue_script('boot', get_template_directory_uri() . '/bootstrap-4.1.3-dist/js/bootstrap.min.js', array('jq'));
.
.
.
読み込みたいjsファイル
}
function my_style() {
wp_enqueue_style('style', get_stylesheet_uri());
wp_enqueue_style('boot', get_template_directory_uri() . '/bootstrap-4.1.3-dist/css/bootstrap.min.css');
.
.
.
読み込みたいjsファイル
}
add_action('wp_enqueue_scripts', 'my_scripts');
add_action('wp_enqueue_scripts', 'my_style');
register_nav_menu( 'header-nav', ' ヘッダーナビゲーション ' );
register_nav_menu( 'footer-nav', ' フッターナビゲーション ' );
気づいたこと
wordpress関係ありませんが, bootstrap4のグリッドレイアウトでレスポンシブデザインを考えるのが難しかった(というか出来ていないのでは...).
font-sizeを動的に変えるやり方についてあまり理解できていないですね.
具体的には, 指定したrowとcolの"box"にぴったり文字が収まるようにできていないです. つまり"box"がfont-sizeによって動的に変化してしまっている(はみ出してる)感じです.
これから
bootstrapとcssの勉強ですね............
あとは綺麗なhtmlの書き方ですね.....