WORDPRESS 清水屋サイト

Blog

  • WordPress 表示中のテンプレートファイル名の表示方法

    WordPress 表示中のテンプレートファイル名の表示方法

    https://hirashimatakumi.com/blog/4092.html#:~:text=%3C%3Fphp%20%2F%2F%20%E7%8F%BE%E5%9C%A8%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D%E3%82%92%E8%A1%A8%E7%A4%BA%20global%20%24template%3B%20%2F%2F%20%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E3%83%91%E3%82%B9%E3%82%92%E5%8F%96%E5%BE%97%20%24temp_name,basename%20%28%24template%29%3B%20%2F%2F%20%E3%83%91%E3%82%B9%E3%81%AE%E6%9C%80%E5%BE%8C%E3%81%AE%E5%90%8D%E5%89%8D%EF%BC%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D%EF%BC%89%E3%82%92%E5%8F%96%E5%BE%97%20echo%20%27%E7%8F%BE%E5%9C%A8%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%EF%BC%9A%27.%24temp_name%3B%20%2F%2F%20%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D%E3%81%AE%E8%A1%A8%E7%A4%BA

  • WordPressで投稿一覧ページを作成する3つの方法を徹底解説！

    WordPressで投稿一覧ページを作成する3つの方法を徹底解説！

    https://www.webdeki.com/column/7896/

  • 力尽きたときのための簡単レシピ

    力尽きたときのための簡単レシピ

    https://saruwakakun.com/life/recipe

    Web開発用の記事を見ていたら、レシピまで。

    「力尽きたときのための」いやはや経験者でないとわかりにくいかもしれませんが素晴らしい記事です。

    本も出してるようです。

  • 初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

    初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

    （要素の検証機能）というびっくりするくらい便利な機能が備わっています。
    今回はその中でも特におさえておきたい便利な機能を紹介。詳細は「サルワカ」というサイトにわかりやすく紹介されておりますのでそちらをご参照ください。

    https://saruwakakun.com/html-css/basic/chrome-dev-tool

  • 初心者向け　ブラウザ上でコードを書いてすぐに実行！！Paiza.IO

    初心者向け　ブラウザ上でコードを書いてすぐに実行！！Paiza.IO

    https://paiza.io/ja

    paiza.IOはオンラインですぐにプログラミングが始められる、 オンライン実行環境です。C,C++,Java,Ruby,Python,PHP,Perlなど 主要24言語に対応。ファイルアップ機能、外部apiへの接続や、 スクレイピングなども可能です。

  • 初心者向けJavaScript入門講座

    初心者向けJavaScript入門講座

    全12回の講座(仮) – javascriptの概要 – javascriptを書いて動かしてみよう – javascriptの四則演算とデータ型 – javascriptの変数について – javascriptの制御フローについて(if) – javascriptの制御フローについて(for, while) – 関数について – 配列とオブジェクト – オブジェクトのメソッド – classで自作オブジェクトを作ろう – DOM操作について – ClickEventとcallback関数 ▼JavaScript講座の再生リスト▼    • 初心者向けJavaScript入門講座  

  • 【WordPress】オリジナルテーマ作成方法！テーマ作成に必須のファイルを紹介

    【WordPress】オリジナルテーマ作成方法！テーマ作成に必須のファイルを紹介

    https://efilamola.com/wp/243/

    「オリジナルのテーマを作りたい！」と思ったそこのあなた！いいですね！

    「でもそもそも一体何から始めればいいの…？」

    そんな悩みを今回は解決していきましょう！

    本記事では、まずはワードプレスからテーマとして認識してもらうための、必要最低限のファイルを作成していきます。

    えふぃ

    そして実際にワードプレスにテーマを読み込ませます！

    その後ワードプレスサイトとして活用していくためにほぼ必須なファイルを紹介します。

    自分で作成したHTMLのサイトを、完全オリジナルのワードプレスサイトにしちゃいましょう！閉じる

    もくじ

    1. オリジナルテーマ作成に必須のファイルを準備しよう！
    2. オリジナルテーマをワードプレスに読み込ませてみよう！
    3. オリジナルテーマに必要なファイルたち
    4. もっとオリジナルテーマをパワーアップさせていこう！

    サンプルコードの使い方

    コード右上のアイコンをクリックすることでコピーできます。

    それでは本文へ、レッツゴー！

    オリジナルテーマ作成に必須のファイルを準備しよう！

    まずは、オリジナルテーマを入れるフォルダを用意しましょう！

    えふぃ

    フォルダ名は自由ですが、テーマ名にしておくとわかりやすいです。
    もちろんtestやsampleでもOK！

    フォルダを作成したら、次の3つを放り込みます。

    テーマとして必須のファイル

    • index.php
    • style.css
    • functions.php

    ワードプレスに、テーマと認識してもらうための最低限の必須ファイルです。

    この3つがあれは、ひとまずテーマとして読み込んでもらうことができるようになります。

    オリジナルテーマ必須ファイル

    ただし、テーマとして読み込んでもらうためには中身にも少し手を加える必要があります。

    それぞれどんな記述が必要で、どんな役割を果たしているのでしょうか？

    index.php

    ワードプレスサイトとして表示されるページの最もベースとなるファイルです。
    これについては、後ほど解説します。

    テーマとして読み込ませる分には空っぽでもいいのですが、一応ブラウザでの表示確認ができるよう、とりあえずは下記をindex.phpにコピペして保存しましょう。

    <!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>テーマ作成テスト</title>
</head>
<body>
    <h1>テストです</h1>
</body>
</html>

    style.css

    普通のcssファイルなのですが、ファイルの冒頭に、このテーマについての情報を書くというお決まりごとがあります。

    えふぃ

    ワードプレスさんに対して、このテーマのタイトルや制作者などの情報を教えてあげます。

    下記をstyle.cssにコピペして保存しましょう。

    右の日本語部分は自由に書き換えてください。

    /*
Theme Name: テーマ名
Theme URI: テーマのURL
Author: 製作者名
Author URI:製作者のウェブサイトURL
Description: テーマの説明文
Version: 1.0
*/

    最低限テーマ名さえあればOKなので、3〜7行目は消してもOK

    これは僕が普段使っているもので、人により掲載する情報は異なり、まあ好みです。

    もっと知りたい方は下記のサイトをご参照ください。
    種類が多すぎてもはや参考になりませんが…。
    テーマの作成 – WordPress Codex 日本語版

    functions.php

    ワードプレスの様々な機能を制御するためのファイルです。

    とりあえず中身は空っぽでOKです。

    functions.phpは、やりたいことが出てきたら、必要に応じて記述をしていくといった形になります。

    現時点では不要ですが、今後本格的にオリジナルテーマを作成し、運用していくためには、最低限記述しておきたいことはあります。

    【WordPress】セキュリティ　functions.phpに記述してセキュリティを強化しよう！

    えふぃ

    これでオリジナルテーマ作成の舞台は整いました！

    この用意したファイルが、テーマ選択画面に出現します！

    やっていきましょう！

    オリジナルテーマをワードプレスに読み込ませてみよう！

    「index.php」「style.css」「functions.php」と最低限必須の3つのファイルを保有したフォルダ、つまりオリジナルテーマが今ここに誕生しました！

    それではこれを実際にワードプレスに読み込ませていきましょう！

    ワードプレスにテーマを読み込ませる方法は2通りあります。

    テーマを読み込ませる方法

    1. テーマが格納されているディレクトリに直接入れる
    2. ワードプレス管理画面から追加する

    エンジニアではなくただのブロガーとしてテーマを読み込む場合なら②でもOK

    ただ僕たちのようなオリジナルテーマ作成勢は、①でテーマを読み込ませます。

    えふぃ

    なぜなら僕たちはコードをゴリゴリ触っていくからです。ウホウホ。

    ①は、ワードプレスが保有している全てのテーマが格納されているディレクトリに、作成したオリジナルテーマのフォルダを直接入れます。

    テーマを作成して一度ワードプレスに読み込ませてからも、後からファイルを追加したり、記述を変更することがでてきます。

    その場合、該当するファイルを直接上書きするだけでOK

    ②の方法だと、編集するたびに既存のテーマを一度消して、再度テーマを丸ごと読み込ませ、もう一度テーマを設定する必要があるので、非常に手間となります。

    テーマが格納されているディレクトリに直接入れる

    ローカルのテスト環境にせよ、本番のサーバーにせよ、格納するディレクトリは決まっています。

    ワードプレスをインストールしたディレクトリ/wp-content/themes

    ここには、ワードプレスが保有している全てのテーマが入っています。

    この「themes」ディレクトリに、オリジナルテーマをフォルダごと放り込みます。

    themesディレクトリにオリジナルテーマを入れる

    これでワードプレスの管理画面からテーマを選択する画面まで足を運ぶと、オリジナルテーマが選択肢に加わっていることが確認できます。

    えふぃ

    オリジナルテーマいた！！！

    後からオリジナルテーマのファイルを新しく追加したり、既存のファイルを書き換えた場合、そのファイルを追加・上書きするとテーマに反映されます。

    有効化するとちゃんとindex.phpの内容が反映されているはずです。

    一応ワードプレス管理画面からテーマを追加する方法も

    一応軽く触れておきますね。読み飛ばしてもOK

    まず作成したオリジナルテーマをzip形式にします。

    その後ワードプレス管理画面から

    ①外観（テーマ）
    ②新規追加
    ③テーマのアップロード

    の順にクリックしていくことで、オリジナルテーマを読み込ませることができます。

    オリジナルテーマに必要なファイルたち

    無事必要最低限のミニマムオリジナルテーマの作成が完了し、テーマとして設定することができました。

    が、ミニマムすぎて、ワードプレスサイトとしてなんの機能も果たしていない状態です。

    お金の入っていない通帳です。

    ここからはテーマとして必須のファイルというわけではないのですがが、ワードプレスを活用するためにはほぼ必須のファイルを紹介します。

    オリジナルテーマにほぼ必須のファイル

    • header.php
      共通のヘッダーとなるファイル
    • footer.php
      共通のフッターとなるファイル
    • home.php
      ホーム（トップ）を表示する際に参照されるファイル
    • page.php
      固定ページを表示する際に参照されるファイル
      固定ページとは投稿機能を持たない独立したページのことです。
      例）会社概要、採用情報、プライバシーポリシーなど
    • single.php
      投稿ページを表示する際に参照されるファイル
      投稿ページとは、投稿機能によって作成されたページのことです。
      例）ブログ記事、お知らせ、施工事例など
    • archive.php
      投稿一覧ページを表示する際に参照されるファイル
      例）記事一覧、お知らせ一覧、施工事例一覧など
    • 404.php
      存在しないページを表示する際に参照されるファイル
      例）https://efilamola.com/not-exist
    • screenshot.png
      ワードプレスのテーマ選択時に表示される画像（880px*660px推奨）

    他にも様々なファイルがワードプレスでは使われるのですが、この辺りがほぼ必須のファイルで、あとは必要に応じてといった感じです。

    それぞれのファイルの役割や使い方については長くなってしまうので、別記事で紹介しています。

    header.php、footer.phpについてはこちら
    single.phpについてはこちら
    archive.phpについてはこちら

    ではこれらのファイルが使われる仕組みを見てみましょう。

    ワードプレステーマに用いるファイル一覧

    ワードプレスはページの種類によって、参照するファイルが異なります。

    例えば、トップページは「home.php」を参照してウェブサイトに反映され、通常の投稿ページの場合「single.php」を参照してウェブサイトに反映されるといった感じです。

    下の表は、どのページがどのファイルを参照するのかを表しています。

    テンプレート階層 – Japanese Team – WordPress.org 日本語

    英語だし知らない言葉いっぱい出てくるしで、これを見るにはまだ少し早いかなという気もしますが、一応軽く説明しておきます。

    まず灰色が何のページかを指しています。

    そしてそのページは、左から順に優先的に参照されます。
    一番左がなければその右を探し、それもなければその右を探し…

    一番シンプルな404ページを見てみましょう！
    下から2つ目の「Error 404 Page」です。

    えふぃ

    404ページとは、存在していないページのことです。
    例）https://efilamola.com/not-exist

    表を見ると、

    Error 404 Page ー 404.php ー index.php

    となっていますね！

    1. だれかが存在しないページを開く
    2. 404.phpが存在すれば404.phpをブラウザに反映する
    3. 404.phpが存在しなければ、右にあるindex.phpをブラウザに反映する

    という流れになっています。

    つまり図で一番右にあるindex.phpは、あらゆるページが最終的に辿り着く受け口的役割を果たしています。

    えふぃ

    そのためテーマに必須のファイルだったんですね！

    もっとオリジナルテーマをパワーアップさせていこう！

    今回はオリジナルテーマ作成のために最低限必須のファイルと、ワードプレスとして活用するためにほぼ必須なファイルを紹介しました。

    これでやっと、オリジナルテーマのスタート地点に立つことができました。

    ここから、あの謎ファイルたちにゴリゴリ記述をしていくうほ。

    とはいっても、なかなかどこから手をつけていくか難しいですよね。

    そんな方のために、ワードプレス学習のためのロードマップを用意しています。

    上から順に是非ご活用くださいませ。

    WP学習ロードマップ　目指せ！WordPress脱初心者！

    今日もあなたが夢に向かって一歩前進できていますように。
    お疲れ様でした。

    おすすめの関連記事WordPress【WordPress】投稿一覧（アーカイブ）ページの作成方法【archive.php】2022-03-05WordPress【WordPress】投稿一覧で記事タイトルの出力文字数を制限する方法2022-03-06WordPress【WordPress】ページャー（ページネーション）の実装方法【paginate_links】2022-03-06

    【WordPress】ワードプレスをローカルサーバーに設置する方法【MA…【WordPress】カスタム投稿タイプ追加方法【タクソノミーも】

    プロフィール

    efilamolaです。
    WEB制作会社に勤める最強のサラリーマン。パズドラとモンストのログインボーナスをもらうのが日課です！プレイはしていません。

    本ブログでは、できるだけ苦労せず、楽しくプログラミング言語を覚えてもらうことを目標にしています。

    あなたが夢に向かって一歩でも前進できますように。

    https://platform.twitter.com/widgets/follow_button.2b2d73daf636805223fb11d48f3e94f7.ja.html#dnt=false&id=twitter-widget-0&lang=ja&screen_name=efilamola&show_count=false&show_screen_name=true&size=m&time=1690643394476

    記事検索

    カテゴリー

    アーカイブ

    新着記事

    人気の記事

  • WordPressで「前の投稿」と「次の投稿」へのリンクを出力する方法と使用例8パターン紹介

    WordPressで「前の投稿」と「次の投稿」へのリンクを出力する方法と使用例8パターン紹介

    https://wemo.tech/705

    WordPressの記事の最後によく表示されている「前の投稿へ」「次の投稿へ」を出力するテンプレートタグ、previous_post_link()とnext_post_link()について、使用方法を整理し、実際の出力パターンをいくつかメモしておきます。

    目次

    previous_post_link()とnext_post_link()の引数の意味を確認しておく

    previous_post_link()と next_post_link()で指定できる引数を確認していきましょう。

    _post_linkの使用形式

    previous_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy );
next_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy );

    両者とも引数が5つあり、いずれも意味は同じです。

    引数説明
    $formatリンクの文字列の書式。リンクの前後に追加する文字を設定できます。「%link」と文字列内に記述すると次の「$link」部分に置き換えられます。 
    初期値： ‘« %link’
    $link表示するリンクのテキスト。「%title」と文字列内に記述すると投稿のタイトルが表示される。 
    初期値： ‘%title’
    $in_same_term現在の投稿と同じタクソノミー・ターム（例：カテゴリー）の投稿に限定するかどうか。’true’ にすると現在のタクソノミー・タームがついた投稿だけを表示します。 初期値： false 注意: 現在の投稿に 2 つ以上のターム（例：親と子の両方）がついていた場合、どのタームがついた投稿へリンクするかは選べません。
    $excluded_terms表示させたくない投稿のターム ID（例：カテゴリー ID）。複数のタームを除外するには配列にするか、コンマで区切ってください（例：array(1, 5) または ‘1,5’）。 初期値： ”
    $taxonomyタクソノミー。これは $in_same_term が true の場合に有効です。（WordPress 3.8 で追加） 初期値： ‘category’

    理解すれば難しくないですが、ちょっとややこしいですね。

    previous_post_link()とnext_post_link()の実際の出力例

    実際の使用例を見ていくのが早いと思うので、8パターンほど例を挙げてみます。

    //デフォルトのまま表示 「« タイトル」と「タイトル »」
previous_post_link();
next_post_link();

//デフォルトと表示は同じだが、「«」 と 「»」をaタグに含める
previous_post_link('%link', '« %title');
next_post_link('%link', '%title »');

//普通に「< 前の記事へ」と「次の投稿へ >」
previous_post_link('%link', '< 前の記事へ');
next_post_link('%link', '次の記事へ >');

//表示は同じだが、aタグの中身はタイトルで、その前に「前の記事 : 」と「»次の記事 : 」をつける
previous_post_link('前の記事 : %link', '%title');
next_post_link('次の記事 : %link', '%title');

//上の例と表示は同じで全てaタグの中に表示
previous_post_link('%link', '前の記事 : %title');
next_post_link('%link', '次の記事 : %title');

//同じカテゴリで「< タイトル」「タイトル >」
previous_post_link('%link', '< %title', true);
next_post_link('%link', '%title >', true);

//同じタグで「< タイトル」「タイトル >」
previous_post_link('%link', '< %title', true, '', 'post_tag');
next_post_link('%link', '%title >', true, '', 'post_tag');

//同じタクソノミーのみで、ID10の記事を除き、「< タイトル」「タイトル >」
previous_post_link('%link', '< %title', true, 10, 'タクソノミー名');
next_post_link('%link', '%title >', true, 10, 'タクソノミー名');

    以上です。

    コピペで使用できると思うので、好きな形式のものを使ってみてください。

    WordPress基礎知識

    wp関数

  • 【WordPress】投稿一覧ページの作り方。have_posts()やthe_post()とは？意味と使い方を解説

    【WordPress】投稿一覧ページの作り方。have_posts()やthe_post()とは？意味と使い方を解説

    https://prograshi.com/wordpress/wp-how-to-make-article/

    WordPressでブログなどの投稿内容の一覧を表示させるときに、have_posts()やthe_post()といった関数が出てくる。これらの関数の役割と使い方について。

    また、実際にhave_posts()やthe_post()を使って投稿一覧を表示する方法について解説。

    have_posts()やthe_post()は<?php ?>というPHPコードタグと合わせて使う。

    have_posts()はDBから取得してきた投稿データが存在するときにはtrueを、存在しない場合にはfalseを返す関数。if文とwhile文と合わせて使われることが多い。

    the_post()は次の投稿を取得して、それを「現在の投稿」としてセットアップし、ループの ‘in the loop’ プロパティを true にする関数。while文の中で使われることが多い。

    どちらも引数（パラメータ）は指定しない。

    実際のコード例１｜PHPコードタグの中に記述する場合

    have_posts()やthe_post()のどちらも投稿一覧を表示するために（ほぼ）決まった定型文の中で使われる。

    <?php
if ( have_posts() ) :
	while ( have_posts() ) : the_post();
		// ループ内のコード
	endwhile;
else :
	echo wpautop( '投稿が見つかりませんでした。' );
endif;
?>

    ・<?php ?>
    PHPコードタグ。この中に書かれた内容をPHPとして処理する。HTMLと組み合わせて使う。

    ・if ( 条件 ) :　endif;
    if文をカッコ{ }ではなく、コロン「:」と「endif;」で記述する書き方。if(条件){処理}と同じ。

    ・while (条件) : 処理 endwhile;
    while文をカッコ{ }ではなく、コロン「:」と「endwhile;」で記述する書き方。while(条件){処理}と同じ。１行目の処理でthe_post()を実行することで、have_posts()の内容を次の投稿の存在に合わせて変更する。

    ・else:
    if文の続き。if(条件): 処理 else: 処理 endif;

    ・wpautop()
    引数で渡された文字列を表示する関数。改行がある場合は自動的に｀<br>`を挿入する。

    実際のコード例２｜１行毎にPHPコードタグを使う

    他の書き方として、HTMLタグのように１行ずつPHPコードタグを記述していく方法もある。

            <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <?php //ループ内のコード ?>
        <?php else : ?>
        　　<?php echo wpautop( '投稿が見つかりませんでした。' ); ?>
        <?php endwhile; ?>
        <?php endif; ?>

    投稿ページの主要テンプレート関数一覧

    投稿一覧ページを作るときには投稿の中の欲しい情報を取得できる便利なテンプレートタグがある。コードを組む前にこれらは知っておく必要がある。

    一つ一つの投稿に紐づく関数なのでトップページのループの中で使う。

    テンプレート関数内容
    the_title()タイトル
    the_time()公開日時
    the_category()カテゴリー
    the_permalink()URL
    the_tags()タグ
    the_content()本文
    the_excerpt()本文の抜粋（110文字）
    the_author()投稿者名

    サムネイル（アイキャッチ）に関するテンプレート関数

    サムネイル（アイキャッチ）に関するテンプレートタグも便利。

    テンプレート関数内容
    the_post_thumbnail( $size, $attr )サムネイルを表示する
    has_post_thumbnail()サムネイルの有無を確認する（true or false）
    get_the_post_thumbnail( $post_id, $size, $attr )他の投稿のサムネイルを取得する（id番号で指定）

    実際の使用例は以下。サムネイルの存在確認をし、サムネイルがある場合のみ表示する

    <?php
if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
	the_post_thumbnail('medium');
}
?>

    ・the_post_thumbnail( $size, $attr )
    $sizeの指定方法は決められたサイズの文字列を入力するか、pxを指定する方法の２種類がある。

    決められた文字列を入れる場合は、(1)thumbnail, (2)medium, (3)large, (4)full が選べる。指定がない場合はthubnailが適用される。

    規定のサイズは「設定」＞「メディア」から変更することができる。

    画像のサイズを指定する場合は ( 横幅, 縦幅 ) で指定する。単位はpxで記述不要。

    the_post_thumbnail( array( 100, 100 ) );

    $attrはデフォルトで、src属性、class属性、alt属性が付与されている。

    $default_attr = array(
	'src'   => $src,
	'class' => "attachment-$size",
	'alt'   => trim( strip_tags( $wp_postmeta->_wp_attachment_image_alt ) )
);


    独自の属性を追加するには array(‘属性名’ => ‘値’) を第２引数にわたす。例えば、classの値を指定する場合は以下のようになる。

    <?php the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) ); ?>

    <img class=”alignleft” >となる。

    投稿一覧ページの作成例

    テンプレート関数を活用して投稿一覧ページを作成すると以下のようになる。

    <?php get_header(); ?>

<div>
    <section>
        <div class="headline">
            新着投稿の一覧ページ
        </div>
        <ul class="blogs-wrapper">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <li class="blog-wrapper">
                <a href="<?php the_permalink(); ?>">
                        <div>
                            <?php if(has_post_thumbnail()): ?>
                                <?php the_post_thumbnail('medium', array('class'=>'blog-img')); ?>
                            <?php else : ?>}
                                <img class="blog-img" src="<?php bloginfo('template_url') ?>/images/nophoto.jpg" alt="">
                            <?php endif; ?>
                        </div>
                        <div>
                                <div class="blog-title"><?php the_title(); ?></div>
                                <div class="blog-lead"><?php the_excerpt(); ?></div>
                        </div>
                </a>
            </li>
        <?php endwhile; ?>
        </ul>
        <?php endif; ?>
    </section>
</div>

<?php get_footer(); ?>

    ・bloginfo(‘template_url’)
    bloginfo()はwordpressの管理画面で入力した情報を表示する関数。template_url はテーマのディレクトリURL。

    例えば以下のようなディレクトリ構造であれば https://example.com/wp-content/themes/my-theme が表示される。

    似た引数で、bloginfo(‘url’) がある。これは、「設定」＞「一般」＞「サイトアドレス」で登録した内容（ドメイン名）を呼び出す。

    この状態でブラウザを確認すると、以下のように冒頭divタグの中の文字のみが表示される。ここに表示する投稿を作成する。

    アイキャッチ画像項目の有効化

    デフォルトではアイキャッチ画像項目がないので、functions.phpに以下を追記する。

    <?php

function custom_theme_setup() {
    add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

    これで、投稿の右カラムにアイキャッチ画像の項目が表示されるようになる。

    投稿の作成

    投稿を適当に５個ほど作成する。

    この状態で、再度、ブラウザでトップページをリロードする。以下のように投稿一覧が表示されればOK。

    ※注意点：phpインクルードタグにスペルミスがあると読み込みが途中で止まる。

    コードで記述したとおり、the_post_thumbnail(‘medium’)、the_title()、the_excerpt()が表示されている。

    スタイルの調整

    スタイルシートは便利なscssを使う。コンパイルするためにプラグイン SCSS-Libraryを有効化する。

    wordpressのプラグイン scss-library

    使い方は有効化し、普通のcssファイル同様にwp_enqueue_styleで、scssファイルを読み込むだけ。（簡単便利）

    スタイルシートの読み込み設定

    front-page.php専用のスタイルシート、front-style.scssを作成しfunction.phpで読み込む。

    html > wp-content > themes > テーマ名 > front-style.scss

    function addtional_styles() {
  if( is_front_page() ){
    wp_enqueue_style( 'front-css', get_template_directory_uri() . '/front-style.scss' );
  }
}
add_action( 'wp_enqueue_scripts', 'addtional_styles' );

    スタイルを個別ページにのみ追加するコードの詳細はWordPressで特定のページにのみcssを適用する方法を参照

    スタイルの調整

    適宜スタイルを調整。

    .headline{
  margin: 30px auto;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
  max-width: 1000px;
}

.blogs-wrapper{
  margin: 0 auto;
  list-style: none;
  display: flex;
  max-width: 1000px;
  flex-wrap: wrap;
}

.blog{
  &-wrapper{
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 250px;
  margin: 20px;
  }
  &-img{
    max-width: 100%;
    height: 170px;
  }
  &-title{
    font-size: 18px;
    font-weight: bold;
  }
}

a{
  text-decoration: none;
}
a:link, a:visited, a:hover, a:active {
  color: #333;
}

    ブラウザで表示を確認

    トップページをリロードし、スタイルが反映されることを確認。

    いい感じのレスポンシブになりました。

    投稿個別ページのレイアウト調整

    各投稿のリンク先である個別ページのレイアウトは signle.php で調整する。

    html > wp-content > themes > テーマ名 > single.php

    例えば、以下のようなコードを設置。

    <?php get_header(); ?>

<main class="container">
  <time class="blog-date" datetime="<?php the_time('Y-m-d'); ?>" >
    <?php the_time('Y年m月d日'); ?>
  </time>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <div>
        <?php if(has_post_thumbnail()): ?>
            <?php the_post_thumbnail('medium', array('class'=>'blog-img')); ?>
        <?php else : ?>}
            <img class="blog-img" src="<?php bloginfo('template_url') ?>/images/nophoto.jpg" alt="">
        <?php endif; ?>
    </div>
    <div>
            <div class="blog-title"><?php the_title(); ?></div>
            <div class="blog-lead"><?php the_excerpt(); ?></div>
    </div>
    <section>
      <div>
        <span><?php previous_post_link('%link','<< 前の記事'); ?></span>
        <span><?php next_post_link('%link','次の記事 >>'); ?></span>
      </div>
      <div>
        <a href="<?php echo home_url() ?>">TOPに戻る</a>
      </div>
    </section>
  <?php endwhile; ?>
  <?php endif; ?>
</main>

<?php get_footer(); ?>

    スタイルシートを設置

    以下のようなスタイルシートを作成。

    html > wp-content > themes > my-theme > css > blog-style.scss

    .container{
  margin: 40px auto;
  text-align: center;
  max-width: 1000px
}

.footer-container{
  max-width: 1000px;
  text-align: center;
  margin-top: 100px;
  color: rgb(153, 153, 153);
}

.blog{
  &-date{
  font-size: 10px;
  color:rgb(153, 153, 153);
  }
  &-title{
    font-size: 20px;
    font-weight: bold;
  }
}

a{
  text-decoration: none;
}

    functions.phpで読み込ませる。

    function addtional_styles() {
  if( is_front_page() ){
    wp_enqueue_style( 'front-css', get_template_directory_uri() . '/css/front-style.scss' );
  }
  if( is_single($post) ){
    wp_enqueue_style( 'blog-css', get_template_directory_uri() . '/css/blog-style.scss' );
  }
}
add_action( 'wp_enqueue_scripts', 'addtional_styles' );

    is_single()はsingle.phpであればtrueを返す。引数に$postを指定すると、現在表示通のページにのみtrueになる。

    ページをリロードして完了。

    投稿の個別ページも無事表示された。

    WordPress

    PHPwp-functions

  • WordPressの関数：__（）、_e（）、_x（）、および_ex（）の意味および違い

    WordPressの関数：__（）、_e（）、_x（）、および_ex（）の意味および違い

    https://old-pine.net/wordpress/wordpress%E3%81%AE%E9%96%A2%E6%95%B0%EF%BC%9A%EF%BC%88%EF%BC%89%E3%80%81e%EF%BC%88%EF%BC%89%E3%80%81x%EF%BC%88%EF%BC%89%E3%80%81%E3%81%8A%E3%82%88%E3%81%B3ex%EF%BC%88%EF%BC%89%E3%81%AE%E6%84%8F%E5%91%B3%E3%81%8A%E3%82%88%E3%81%B3%E9%81%95%E3%81%84

    記事カテゴリ

    wordpressタグ

    hook

    WordPressの関数：__（）、_e（）、_x（）、および_ex（）の意味

    • WordPressには多言語サイト（i18n）で、複数の言語翻訳インターフェースがあります
    • 言語翻訳などに関する関数がいくつかあります
      • __()
      • _e()
      • _x()
      • _ex()
      • _n()
    • 古いバージョン（バージョン2.9）までに：_c() がありますが、その後廃止され、_x（）に置き換えられました。
    • __（）と_e（）は最も単純な関数です。
      • 変換された文字列を返す
      • 1つの文字列、1つの翻訳
    • _x（）は2つ以上の言語翻訳時に使用されますstring _x (string $text, string $context, [string $domain = ‘default’])
      • パラメータ$context：　異なるコンテキストから文字列の区別ができます
      • poファイルに違う文字列を定義します//　.potファイルで文字列の定義 msgctxt “test1” msgid “testing” msgstr “context1” msgctxt “test2” msgid “testing” msgstr “context2”
      • ここで、 “msgctxt” がマジックのような存在で、コンテキストへの変換ができます// _x（）の使用 echo ‘Context: test1 -> ‘ . _x(‘testing’, ‘test1’, ‘test’); echo ‘<br>Context: test2 -> ‘ . _x(‘testing’, ‘test2’, ‘test’); // 上記の実行結果 Context: test1 -> context1 Context: test2 -> context2
    • 関数：_exは、_eと_xの組み合わせです。コンテキストを使用して翻訳された文字列を出力します
    • 関数：_n() は”単数”、”複数”の抽出ができます_n( $single, $plural, $number, $domain = ‘default’ )
      • ドメインが$l10nリストに設定されていない場合は、比較が行われ、いずれか$pluralまたは$singleパラメータが返されます
      • この関数はフィルタngettextを介して返され、これについては返された文字列をフィルタリングできます。
    • _n()の簡単な例は以下のようで$domain = ‘test’; $comment_count = 1; echo _n(‘comment’, ‘comments’, $comment_count, $domain) . ‘<br/>’; $comment_count = 2; echo _n(‘comment’, ‘comments’, $comment_count, $domain); // 日本語環境（ja）の定義 msgid “comment” msgid_plural “comments” msgstr[0] “コメント” msgstr[1] “コメント一覧” // 実行結果 コメント コメント一覧
    • コメントに関する”単数形”、”複数形”の出力