【今更聞こうよWordPress！第３回「パーツ化」編】 個人投資家のFIREへの旅路 第144夜
WordPressでオリジナルのテーマを作る！
今回は、各箇所の「パーツ化」
という、考え方を解説します！！
【パーツ化とは】
Webサイトを作る際に、トップページ、アバウトページ、コンタクトページ
など、様々なページを作りますが、
ここで共通したレイアウトの箇所って
ありますよね？
例えば、ヘッダー部分、フッター部分、ナビ部分など！
この辺りをパーツ化して、使い回して楽しよう！って話です！
【パーツ化の方法】
HTMLで書いたサイトをWordPress化する際に、index.htmlのファイルをindex.phpに変更する必要がありましたね。
詳しくはこちら↓
なので、index.phpの中にトップページのコードがズラーっと書かれている状態です。
これを他の階層ページでも使っている箇所を見ていきます。
①【header.php】
まずは、header.phpというファイルを作り、index.phpの中身の
共通となる箇所までのコードを切り取り、
header.phpに貼り付けます。
どこからどこまでをパーツ化すかは、やり方は色々あるので、
「共通する部分」が基準です！
こちらは制作途中のコードですが、僕の場合は
<!DOCTYPE html> から、</header>までを「header.php」にしました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S.A.P.design</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/tablet.css" media="screen and (max-width:1024px)">
<script src="https://unpkg.com/scrollreveal"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous">
<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
<!--wrapper---------------------------------------------->
<div id="wrapper">
<!--header---------------------------------------------->
<header class="header">
<h1><a href="#"> S.A.P.design</a></h1>
<nav class="header-navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">blog</a></li>
</ul>
</nav>
</header>②【footer.php】
header時と同じように、footer部分もパーツにします！
大体もうお分かりでしょう！
この辺を切り取って、footer.phpにペーストします。
僕の場合はこの辺りをパーツ化しました！
<footer> から </html>あたりまでです。
<!--footer---------------------------------------------->
<footer>
<div class="rights">2021.S.A.P.design</div>
</footer>
</div> <!--layer-end--------------------------------------------->
</div> <!--wrapper-end--------------------------------------------->
<?php wp_footer(); ?>
</body>
</html>このように、パーツ化したら、それを他のページで読み込む必要があります。
読み込むコードがこちら！
<?php get_header(); ?>
<?php get_footer(); ?>見ての通りです！headerをgetする、footerをgetするですね！
このコード書いた場所に、header.phpの内容が表示されるということ。
なので、ページがどんどん増えて行っても、共通部分は、この一文で完了というわけです。
さらに、デザインを変えたい時も、header.phpのファイルだけを編集すれば、全てのページが更新できることになりますね！
なんと便利な、PHP×WordPress！！
【この他のパーツ】
紹介した、header.php、footer.php以外にも、sidebar.phpというものがあり、字のまま、サイドバーを使う場合には、これをパーツ化します。
そして、この３つ以外にも、任意でパーツしたい箇所があった場合はどうするか？
見ていきましょう！
先程、header.phpの中に格納した、naviの部分は、別のパーツにして使うという方法もあります。
より管理しやすくなるので、そのほうがいいかもしれません。
例えば、
navi.phpというファイルを作り、naviの部分をコピペする。
<nav class="header-navi">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Concept</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">blog</a></li>
</ul>
</nav>これで、navi.phpというファイルに、navi部分の機能を格納しました。
そして、あとは読み込むコードを書きます。
headerの時は、get_headerでしたが、
header、footer、sidebar以外のパーツファイルは、読み込むコードが
変わります。
それがこちら！
<?php get_template_part('navi'); ?>
template partをgetしてこいってことですね、
で、そのtemplate partは naviって名前のファイルだよ！
と、指示しています。
ここでの注意点は、どのファイルかを指定する際に、「.php」は省略するとうことです。
これで、あとは、設置した箇所に、PHPの一文を置くだけ！
ほんと便利でしょ！！
【まとめ】
今回は、パーツ化を学びました！
header.php
footer.php
sidebar.php
は、 WordPressが元々設置しているパーツファイルになります。
なので、読み込むコードは、 WordPress独自のタグになります
<?php get_header(); ?>
<?php get_footer(): ?>
<?php get_sidebar(); ?>
このようなコードで呼び出します！
これ以外に、任意でパーツ化したファイルを呼び出す場合は、
<?php get_temlate_part( '○○○○' ) ?>
○の中には、命名ファイルの拡張子の前の部分を書きます！
ファイル名が、navi.phpであれば、呼び出すときは、
<? php get_template_part('navi'); ?>
こうなります！
パーツは設置した箇所に、コードをコピペして設置してきましょう！
デザインを変更する場合にも、ファイル一つ更新すれば、更新したファイルが、それそれの箇所で読み込まれるので、全てのページのコードを書き換えるなんて手間が省けます！
PHP×WordPress ほんと便利だわ〜！！
理解に時間の投資は必要ですが、投資した時間は数倍の効率化、時短化というリターンとなります！
全体像を理解する意識でやっていきましょう！
この記事が気に入ったらサポートをしてみませんか？