【wordpress自作テーマ作り】その3:テンプレートを分割する
html、cssファイルをアップロードする
今まで作ってきたページをlocalのwordpressの中に入れる。
index.html、style.css、imagesフォルダを圧縮。
wordepress内の「外観」→「テーマ」→「新規追加」→「テーマのアップロード」からzipファイルをアップ。
これで作ってきたファイルとlocalのwordpressがつながった感。
注意：アップロードした後でstyle.cssなどを別の改装に移動させるとテーマが表示されなくなる。
さらにアップロードし直そうとして、ワードプレスにアップしたファイルを消すと、アップする前のフォルダも消える。
index.htmlをindex.phpに拡張子変更。
分解する準備。
functions.phpを作成する。
メニューとかアイキャッチを表示したりするのに必要。まっさらなphpファイルを準備。
index.phpを部分ごとに分解する。
- header.php（<header>〜</header>）
- index.php(<main>〜</main>)
- sidebar.php(<section>サイドバー 入ってる部分</section>)
- footer.php(<footer>〜</footer>)
header.phpを作成する
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>やっていくブログ</title>
<meta charset="UTF-8">
<meta name="description" content="WEBをやっていくぞー">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/reboot.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<header>
<div class="rogo">
<h1><img src="images/rogo.png"></h1>
<p>やっていくぞー</p>
</div>
<input type="checkbox" id="navTgl" class="none">
<label for="navTgl" class="open"><span></span></label>
<label for="navTgl" class="close"></label>
<nav>
<ul>
<li>html</li>
<li>life</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</header><!DOCTYPE html>
<html>
<head>
<title><?php if( !is_home() ){
wp_title(' - ', true, 'right');}
bloginfo(' name '); ?>
</title>
<meta charset="UTF-8">
<meta name="description" content="WEBをやっていくぞー">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>css/reboot.css">
<?php wp_head(); ?>
</head>
<div class="wrapper">
<header>
<div class="rogo">
<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/rogo.png"></a></h1>
<p><?php bloginfo('description'); ?></p>
</div>
<input type="checkbox" id="navTgl" class="none">
<label for="navTgl" class="open"><span></span></label>
<label for="navTgl" class="close"></label>
<nav>
<?php $args = array(
'menu' => 'global-navigation',//管理画面で作成したメニューの名前
'container'=> false,//
);
wp_nav_menu($args);
?>
</nav>
</header>
ここはヘッダーのしるし
<?php wp_head(); ?></head>直前に入れる。これがないとプラグインが動かなくなるので注意。
ヘッダーを呼び出す（index.phpに記述）
<?php get_header(); ?>ヘッダーのあった部分に入れるとindex.phpにheader.phpが呼び出せます。
ナビゲーションメニュー
ナビゲーションメニューを作るために、functions.phpに追加する。
add_theme_support('menus');header.phpで書き換えるのはここ。
<nav>
<ul>
<li>html</li>
<li>life</li>
<li>3</li>
<li>4</li>
</ul>
</nav><nav>
<?php $args = array(
'menu' => 'global-navigation',//管理画面で作成したメニューの名前
'container'=> false,//
);
wp_nav_menu($args);
?>
</nav>
ナビゲーションメニューを出す。
※wordpress内で操作するためには、「外観」→「メニュー」から、メニュー名「global-navigation」とするメニューを作成して連動させることが必要
‘container’=> false,//
container（文字列） （オプション） ul をラップするか、ラップする場合は何でラップするか。使えるタグは、 div、nav。コンテナをなしにする場合は false。
cssやjavascriptの読み込みについて
wordpressでは、headerにcssやjavascriptを読み込ませず、functions.phpに記述して一括管理することが推奨されているそうです。
なぜかjQuery ２つも書いてる……。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/reboot.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>//jQuery読み込み
function add_files() {
wp_deregister_script('jquery');
wp_enqueue_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', "", "20160608", false );
wp_enqueue_script( 'surusuru', get_template_directory_uri() . '/js/surusuru.js', array('jquery'), '1.3.2', true);
wp_enqueue_style( 'main', get_template_directory_uri() . '/css/reboot.css', "", '20160608' );
wp_enqueue_style( 'main2', get_template_directory_uri() . '/style.css', "", '20160608' );
}
add_action('wp_enqueue_scripts', 'add_files');wp_deregister_script(‘jquery’);←wordpressに元から入ってるjQueryを読み込ませない。
wp_enqueue_script( ‘surusuru’, get_template_directory_uri() . ‘/js/surusuru.js’, array(‘jquery’), ‘1.3.2’, true);←wp_enqueue_script( 任意の名前, ファイルのURL, スクリプトのハンドル名（適当）, バージョン（適当）, bodyの前か後に記述する);