2018.12.09 2023.08.08

ローカル開発環境でワードプレスオリジナルデザインを開発しよう４コード編【HTML, CSS, JavaScript, PHP, WordPress初心者】

shu

はい、素晴らしく久しぶりの連続更新です。

このまま突っ走れればいいのですがw

では今日もワードプレスでオリジナルテーマを作成していきましょう！

今日はワードプレステーマ制作で使うことができる関数たちを紹介していこうと思います。

ワードプレスのコードとは

今日はコードまとめ編です。ワードプレスにはあらかじめ準備された関数たちがいてそれを使って開発していきます。例えばページタイトルを表示したいと言う場合・・・

<?php bloginfo(); ?>

と（関数を）書けばタイトルを呼び出してくれてワードプレスのダッシュボードからタイトルを変更すると自動でこちらもアップデートされます。

[el url=”https://wpdocs.osdn.jp/Main_Page”]WordPress Codex 日本語版[/el]

こちらのコーデックスを使えば用途に合わせた関数を検索できます。めちゃくちゃわかりづらいですけどね…（笑）ってなわけで今日はそのワードプレスシンタックス（ワードプレスコード）をまとめました。ちなみに引数がたくさんあるので今回はよく使いそうなものだけピックアップしてます。

ホームページでよく使うコード

タイトル表示

<?php bloginfo(); ?>

必須コード

この2つは必須なので忘れないようにしてください。

<?php
　wp_head();
　//ヘッダ内に書きます
　wp_footer();
　//フッター内に書きます
?>

ホームページのパスを表示

aタグにリンクとして使えます。echo(テキストとして表示)を使わないといけません。

<?php
　home_url();
　//homeはホームページのパス
　//おそらくホームページは設定によって変えられるはず
　site_url();
　//siteはサイトがどこにあるかのパス
?>

bodyクラス

bodyにクラスを持たせる。ログイン後logged-inと言うクラスを生成する。引数としてテキストを渡すとクラス名を生成できる。ホームページ以外だと違うクラスを持つ（css分岐可）

<body="<?php bloginfo(引数); ?>">contents</body>

is系分岐

ページごとに違う条件をつけることができる（もしホームページじゃない場合は〜を表示、等）

<?php
　is_home();
　is_page();
　is_category();
　is_front_page();
?>

ヘッダーとフッターを呼び出す

分けてheader.phpとfooter.phpを作っていればそれを呼び出せます。
引数にオリジナルで作ったヘッダー名を入れるとそれが呼び出せます。
get_header();を同じファイル内に２回書いても動かなかったので２回使うことはできない模様。

<?php
　get_header();
　get_footer();
　get_header('名前');
　header-名前.php
　//通常とは別にheader-名前.phpとして作ったheaderを呼ぶことができます
?>

if、while分岐

phpには{}←ブランケットを使った書き方と:←コロンを使った書き方があります。

　<?php
　　$a = 5;
　　if ($a == 5):
　　echo "aは5に等しい";
　　elseif ($a == 6):
　　echo "aは6に等しい";
　　else:
　　echo "aは5でも6でもない";
　　endif;

　　<?php
　　$a = 5;
　　if ($a == 5){
　　　echo "aは5に等しい";
　　}elseif ($a == 5){
　　　echo "aは5に等しい";
　　}else{
　　　echo "aは5でも6でもない";
　　}

なお、html内にphpを書くとコードが汚くなって読みづらいので{}で書くより、最後にendifやendwhileが文末に使えるコロン文の方で書くとどこでif文が終わってるわかりやすくなると思います。

ループ編

記事ページに行った際に今まで投稿された記事を取得するためにループしないといけません。なので最初はどうやってループさせるか説明します。

//もし投稿があるなら
<?php if (have_posts()):
//投稿の数だけ
while (have_posts()):
//the postする（the_postの中でループをいろいろ設定してるので必須です）
the_post(); ?>
//ここに書いたものが1つの記事として表示されます
　//while終わり
　<?php endwhile; ?>
// もし投稿がないなら
<?php else: ?>
　<p>記事がありません</p>
//if終わり
<?php endif; ?>

//ここに書いたものが1つの記事として表示されますがループ内になります。

ループ内部で使えるコード

記事タイトル

<?php the_title(); ?>

ID番号

データベースで登録された番号が表示されます。あんまり使わないかも..?

<?php the_ID(); ?>

カテゴリー

<?php the_category(); ?>

投稿日時

<?php the_time(); ?>

リンク

aタグにechoして使いましょう。

<?php the_permalink(); ?>

記事内のテキスト

ダッシュボードでで”続きを読む”を指定してる場合はそれより上のテキストを表示

<?php the_excerpt(); ?>

サムネイル画像

引数としてサイズを指定できます（こちらも複雑なので後日w）

<?php the_post_thumbnail(); ?>

まとめ

ってことで今日まとめたコードを全部使うとこんな感じになります。
まずはheader.phpとfooter.phpという新しいフォルダを作ります。今のフォルダ構成はこんな感じ。

-index.php
-style.css
-header.php
-footer.php

header.php

<?php
　echo 'header';
?>

footer.php

<?php
　echo 'footer';
?>

index.php

<?php get_header(); ?>
<br>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_category(); ?>
        <?php the_post_thumbnail(); ?>
        <a href=<?php the_permalink(); ?>>続き</a>
    <?php endwhile; ?>
<?php else : ?>
    　<p>記事がありません</p>
<?php endif; ?>
<br>
<?php get_footer(); ?>

みたいな感じに書くと下の画像みたいな感じに表示されます。実際に記事をたくさん投稿してみたい場合は、テーマユニットを使うと仮の記事が作れるのでやってみてください。この状態ではまだfunction.phpを定義してないのでCSSは影響させることが出来ません。それを次回やっていきます！

まぁとりあえず最後のコードをコピペしていろいろ表示させて遊ぶのが理解しやすいかと思います！それではまた次回。See Yaaaaaaaaaaaaaaa!!

#CSS #HTML #JavaScript #jQuery #PHP #WEB制作

ABOUT ME