2020年12月からデイトラは上級に入り、約一か月が経過しました。なんとなく想像していましたが、１日１題とはいきませんね。まだ上級の途中ですが、DAY12~13で「ここまでくれば半分」とあったので一旦復習に入っていまして、この時点で記事にまとめておこうと考えました。特にWordPress編に入りテンプレートタグというこれまでのレッスンとは何の繋がりもない呪文が出てきて「わからん…とりあえずこう書けばいいのね」とコピペ作業になってしまい、理解して進んでいる気がしていなかったので、YouTubeを覗いてみました。上級に入ってからデイトラの動画レッスンが少なくなったのもありますね。
YouTubeにも「WordPress 使い方」「WordPress テーマ 自作」などで検索すると関連の動画がたくさん出てきて、さすがWordPressは広く使われているCMSだけあって、情報も多い。始め方からいくつか手法があるみたいで、絶対の正解があるわけではないのですが、「で？どれでやるのが正しいの？」となりますよね、僕が今そういう状態です。ただそうした比較をしたからこその「わかった」「いや、まだわからない」がありましたし、「デイトラではこうだったけど、こっちの方がいいかも」がありましたのでまとめておきます。
気を付けていただきたいのは、今回の記事のWordPress関係の記述が正しいものかどうかわからない、という点です。間違っている箇所もあるかと思いますが、これも勉強中の今しか書けない記事ですので、ご容赦ください。
WordPressの始め方から様々
デイトラでは「MAMP」をインストールとしてローカル環境構築から始めていますが、これが多い印象でしょうか、他にも「Flywheel」も挙がりますが、これはサイト名のフォルダを作って、ユーザー名・パスワードを設定するだけなんでしょうか。DAY7にも書いてありますが、WordPressだけならMAMPより使いやすいのかも。
そこから違いが現れます。デイトラではecフォルダとdevフォルダを作り、ダウンロードしたWordPressをdevに入れます、もうここでよくわからない…このecフォルダはこの先のレッスンで使うのだろうか？ちなみに僕が見た中ではデイトラの解説が一番面倒くさいやり方を紹介していた、ような気がします…
他に紹介されていたMAMPの例ですが、MAMPフォルダのhtdocsにダウンロードしたWordPressフォルダを入れ、ディレクトリとする。これだけで「ようこそ画面」まで行けるのでこっちの方が僕は気に入りました。
テーマ設定にしてもデイトラではDAY8でindex.phpなど13ものファイルを「まず作れ」と指示されますが、必要に応じて作る方が初心者にはわかりやすく、さらにstyle.cssにテーマ概要、function.phpにセットアップの関数add_theme_support(‘post-thumbnails’);などを書き、もうこの時点でただのコピペ作業になってしまいます。
それより
- wp-contentのthemesに自作テーマフォルダを作る
- そこにindex.phpとstyle.cssを作る、これで自作テーマは取り敢えず出来ました
この方がいいですよね。デイトラのはautomatic-feed-linksとよくわからない記述まであって、「ここまでしないと自作テーマにならないの？じゃあ、もうコピペだ…」になるわけです。レッスン数も限られているので「ちょっと発展」もこの段階でまとめて書いてあるのでしょうが、まずは最低限を示してもらわないと、初心者にはどれが最低限かわからないのですから迷います。
ヘッダー・フッターの分割について
デイトラ上級DAY8で紹介されていますが、これも様々やり方が別れるのでしょう。
分割・パーツ分けについて簡単にいうと「共通部分は同じの書くとコード量も増えるから、まとめよう」ということです。
index.phpに<?php get_header(); ?>と書くとheader.phpの中身が出力されるということです。そして<?php get_header(); ?>はcategory.phpやsingle.phpなどでも「使い回し」が出来る、となります。ポイントはどこからどこまでheader.phpに書くのか、どこを共通化する？になってくるのです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
│
いろいろ書いて
│
<?php wp_head(); ?>
</head>
<body>
と、ここから<header>がありまして、<main>本文と続くわけですが、デイトラでは共通する部分の全てを切っています。文字にすると伝わりにくいですが、index.phpが
<?php get_header(); ?>
<!-- pickup -->
<div id="pickup">
<div class="inner">という書き出しで始まっています。順を追って解説されているので僕は理解できていますが、いきなりこのコードを見た人は「え？」となりますよね。htmlやbodyの開始タグも無くなります。では、どのようにやり方が別れるのかですが
<head>
<?php get_header(); ?>
</head>
<body>とmeta、link、 <?php wp_head(); ?>などの読み込み情報だけをheader.phpにまとめる、やり方です。こうするとデイトラ上級のレッスン内容に沿っていうと、header-logo、drawer、header-navはindex.phpに残り、コードの記述は増えてしまいますが、パッと見た人にも分かりやすく管理しやすいのではと思います。さらに
<head>
<?php get_header(); ?>
<link rel=””>
<style>
</head>など「このペースだけに読み込ませたい何か」を追加する際にはこちらの方が圧倒的に便利ですよね。フッターに関しても仕組みは同じです。デイトラ上級では現段階(DAY14)でindex.phpが
</main><!-- /primary -->
<?php get_sidebar(); ?>
</div><!-- /inner -->
</div><!-- /content -->
<?php get_footer(); ?>という終わり方になっています。mainはありますが、wp_footer()、body閉じタグ、html閉じタグはfooter.phpに入っています。
まとめる共通範囲を狭めてしまえば、残されたコードが増えてしまいます。が、WordPressではどんな箇所も共通化できてしまうそうなんです。別ファイルをつくりそこにまとめるので、ファイルは増えますがこれはしょうがない。どちらかは各自が選択することになります。調べてみるとget_template_part()を使うそうです。
例えばヘッダーをまとめたいとすると、
- 共通ファイルを管理するフォルダ(common)を作って、その中にheader.phpを作ります。(header.phpが2つあることになりますが、区別される様子を確かめるのにちょうどいいでしょう)
- <header id=”header”>~~</header>の中身を切り取り、commonフォルダのheader.phpに貼り付けて、
- 元の場所には<?php get_template_part(‘common/header’); ?>と書く
<header id=”header”>
<?php get_template_part(‘common/header’); ?>
</header>このようになります。
これをsingle.phpやcategory.phpなどの該当箇所にも当てはめていけばコード量を少なくすることも可能です。
と、YouTubeなどで復習してみた結果、「デイトラのあの記述はこういうことか」「こっちのやり方の方がいいかも」などいくつかの発見がありました。デイトラもDAY8で「1冊は技術書をもっておくべき」と「WordPressの教科書」を勧めていますし、複数の教材を比較してみると理解が深まることもありますね。
プログラミングに絶対の「正解」はないと思います。みなさんの馴染みのある方が使いやすいのなら、それを使うべきなのかもしれません。
コメント