リリイログ Written by Yumi Nakamura

【YouTube講座】WordPress開発講座#03 テンプレートタグを使おう②の概要

積み上げ


【YouTube講座】WordPress開発講座  #03
谷口まことさんの ともすたチャンネル

の視聴をしました。

内容を、インプットするために、記録を残します。

index.php のコードを書き換えて、テーマの体裁を整える

下記の書き込みを、どこでもよいので、入れる

<?php the_post(); ?>

本文を表す

<?php the_content(); ?>

作者の名前を表す

<?php the_author(); ?>

メールアドレスが出てしまっているのは、カスタマイズできます。
ダッシュボード 〜 ユーザー 〜 プロフィール

ニックネームとブログ上の表示名を、メールアドレスでないものに、変更します。

vendorフォルダを移動させる

vendorフォルダを入れてなかったので、cleanblog ダウンロードしたフォルダから、tomosutaフォルダへ移動させておきます。

テーマフォルダの中身

スタイルシートにリンクする

スタイルシートへのリンクは、デフォルトでは下記

<link href="css/clean-blog.min.css" rel="stylesheet">

WPのcssは、
通常のHTMLと異なっています。
今、CSSフォルダは、wp-content/tomosuta/css
の中に入っています。
WPのリンクは、
リンクをそのまま書かずに、phpのタグと命令文を書きます。

<?php echo get_template_directory_uri(); ?>

get は、取ってくるという命令文
eco は、それを表記する命令文

上記のphp命令文を、CSSを参照している部分に、ポコポコと貼り付けていきます。

<link href="css/clean-blog.min.css" rel="stylesheet">

<link href="<?php echo get_template_directory_uri(); ?>/css/clean-blog.min.css" rel="stylesheet">

<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<header class="masthead" style="background-image: url('img/home-bg.jpg')">

<header class="masthead" style="background-image: url('<?php echo get_template_directory_uri(); ?>/img/home-bg.jpg')">

<script src="vendor/jquery/jquery.min.js"></script>

<script src="<?php echo get_template_directory_uri(); ?>/vendor/jquery/jquery.min.js"></script>

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="<?php echo get_template_directory_uri(); ?>/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="js/clean-blog.min.js"></script>

<script src="<?php echo get_template_directory_uri(); ?>/js/clean-blog.min.js"></script>

保存して、サイト更新すると、

エラーのお知らせ

「サイトに重大なエラーがありました。」の表示になりました。

関数リファレンス/get template directory uri が間違っていました。

<?php echo get_template_directory_url(); ?>と誤っていました。

i を l と書いていました。単純に、url と思い込んでいました。

<?php echo get_template_directory_uri(); ?>が正しい命令文。

保存して更新すると、今度は、体裁の整ったブログが出ました。

体裁が少し整ったブログ

不要なコードを削除する

<meta name="description" content="">

<meta name="author" content="">

は、WPの方で設定できるので、削除します。

タイトルタグも削除します。

<title>Clean Blog - Start Bootstrap Theme</title>を削除します。

ブログ名を書き換える

<?php bloginfo('name'); ?>
bloginfo() タグは、ブログについての何の情報を表示するかを指定する引数(show 引数)を一つだけ受け取ります。

<a class="navbar-brand" href="index.html">Start Bootstrap</a>

<a class="navbar-brand" href="index.html"><?php bloginfo('name'); ?></a>

テンプレートタグ/bloginfo
Markdown 参考サイト

リンク先 index.html を、WPのトップページにする

<a class="navbar-brand" href="index.html">

<a class="navbar-brand" href="<?php echo home_url(); ?>">