シングルページ用のPHPファイルの作成と画像表示の方法
こんにちは、今日はWordPressテーマのカスタマイズについて学びましょう。特に、シングルページ用のPHPファイル「single.php」の作成と、画像の表示方法について説明します。
画像表示の準備
最初に、画像を表示する方法について確認しましょう。まず、あなたがダウンロードしてきた素材を適切な場所に配置します。以下のように、イメージフォルダーの中に画像を入れてください。
/my-theme
/images
image.jpg
好きなハムのサイトの下部にあるダウンロードURLから素材をダウンロードし、images フォルダーに入れてください。
画像をHTMLに表示する
次に、画像を表示するためのHTMLタグを作成します。以下のように img タグと PHP を使います。
<img src="<?php bloginfo('template_url'); ?>/images/image.jpg" alt="Image">
ブログの情報を表示するための関数 bloginfo('template_url') を使うことで、テーマのURLを取得し、画像へのパスを確実にします。
+----------------------------+
| |
| (Your Image) |
| |
+----------------------------+
このようにして、画像を正しく表示することができます。
シングルページの作成
次に、シングルページのPHPファイル single.php を作成します。これは、投稿記事を個別に表示するページです。
まず、single.php ファイルをテーマフォルダ内に新しく作成し、以下のコードをコピーして貼り付けます。
<?php get_header(); ?>
<div id="content">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>
これにより、投稿のタイトルと内容が表示されます。
+----------------------------+
| Blog Header |
+----------------------------+
| Title of the Post |
| ----------------------- |
| Content of the Post |
| ----------------------- |
| Maybe some comments |
+----------------------------+
| Blog Footer |
+----------------------------+
これで、個別の投稿ページが正しく表示されるようになります。
カスタマイズ
さらに、シングルページで異なる背景色を設定したい場合は、スタイルシートを変更します。例えば、body に id="single" を追加し、CSSで以下のように指定します。
#single {
background-color: #9999ff;
}
このようにして、シングルページだけ背景を異なる色に設定できます。
+----------------------------+
| |
| Title of the Post |
| |
| (Blue Background) |
| |
| Content of the Post |
| |
+----------------------------+
まとめ
これで、シングルページ用のPHPファイルを作成し、画像を表示する方法がわかりました。WordPressテーマのカスタマイズは、シンプルな手順を踏むことで、より魅力的なサイトを作ることが可能です。
次回は、さらに応用的なテクニックを学び、サイトを本格的に仕上げていきましょう。お楽しみに！
タイムスタンプ
1 00:00:01,399 --> 00:00:06,730 シングル psp 個別ページについて
2 00:00:05,179 --> 00:00:13,359 やっていきましょうか
3 00:00:06,730 --> 00:00:16,600 えっとじゃあその前にですね画像を表示するというのをまだやってなかったので画像の
4 00:00:13,359 --> 00:00:18,550 表示の仕方もやってみます
5 00:00:16,600 --> 00:00:20,310 これは
6 00:00:18,550 --> 00:00:23,759 フォルダの中
7 00:00:20,309 --> 00:00:29,460 download あの素材のダウンロードというのはですね
8 00:00:23,759 --> 00:00:36,659 できるようになっていますのでえっと好きなハムのサイト今見ているページの下の方に
9 00:00:29,460 --> 00:00:40,299 ダウンロードの url を載せておきますそこから8このイメージフォルダーの中に
10 00:00:36,659 --> 00:00:41,039 入っているこの画像がダウンロードできますのであの家ていただいて
11 00:00:40,299 --> 00:00:44,250 ああああああ
12 00:00:41,039 --> 00:00:50,070 でイメージすフォルダーの中に入れてください
13 00:00:44,250 --> 00:00:52,109 マイテーマの中にイメージ図フォルダーを作ってその中に画像を入れると
14 00:00:50,070 --> 00:00:54,100 こういう構造にしてください
15 00:00:52,109 --> 00:00:58,869 では例えば
16 00:00:54,100 --> 00:01:00,350 今回ですね powder . jp 9というのがありますこういう音画像
17 00:00:58,869 --> 00:01:02,269 これを
18 00:01:00,350 --> 00:01:05,409 表示してみましょう
19 00:01:02,270 --> 00:01:05,409 一番上のほうにね
20 00:01:05,439 --> 00:01:11,810 この blog info のしたいしましょうか
21 00:01:08,510 --> 00:01:15,380 ここじゃあ img た分
22 00:01:11,810 --> 00:01:19,040 総数ここにですで bsp
23 00:01:15,379 --> 00:01:23,099 がエスケープキーを押して psp タブ
24 00:01:19,040 --> 00:01:24,930 やると psp 一発で出てきますんで
25 00:01:23,099 --> 00:01:30,269 ここにですね
26 00:01:24,930 --> 00:01:36,750 そうかじゃあその前に通常であれば通常のでパスであれば選んでいくぞと psp から
27 00:01:30,269 --> 00:01:37,679 見て趣味の学ばれた方わかるかも知れですけどさっきのパンなどと jpeg はこの
28 00:01:36,750 --> 00:01:40,670 中
29 00:01:37,680 --> 00:01:44,330 イメージズフォルダーの中入っているよと
30 00:01:40,670 --> 00:01:46,829 で言うことじゃないですかだからイメージ図
31 00:01:44,329 --> 00:01:54,799 スラッシュパーン
32 00:01:46,829 --> 00:01:57,909 ダン. jp 1降格わけですよね普通はねこれではやってみましょう
33 00:01:54,799 --> 00:01:59,739 ここに表示はされません
34 00:01:57,909 --> 00:02:03,359 ので
35 00:01:59,739 --> 00:02:06,250 適切なこの前にですね
36 00:02:03,359 --> 00:02:10,478 タグを書いてある人があります
37 00:02:06,250 --> 00:02:14,110 イメージ図の愛の左にまずスラッシュを入れておきましょうか
38 00:02:10,479 --> 00:02:19,099 さらにそのツラ種左に移動して psp
39 00:02:14,110 --> 00:02:20,450 たぶんここでですねブログ印舗
40 00:02:19,098 --> 00:02:22,340 の
41 00:02:20,449 --> 00:02:23,879 テンプレート
42 00:02:22,340 --> 00:02:26,378 url
43 00:02:23,879 --> 00:02:27,740 都会で上げます
44 00:02:26,378 --> 00:02:30,810 でですねー
45 00:02:27,740 --> 00:02:34,709 ブラウザーを更新しています
46 00:02:30,810 --> 00:02:39,719 それとここに大きく打ってましたそうですね
47 00:02:34,709 --> 00:02:45,069 さっきのブログ info って書いてあげると適切なパスに置き換えられてくる
48 00:02:39,719 --> 00:02:49,408 置き換えてくるんですねちょっとどんなパスが出てるか見てみましょうか
49 00:02:45,068 --> 00:02:52,699 この chrome だったらコマンドシフト c デー
50 00:02:49,408 --> 00:02:56,349 デベロッパツール音が使えますんで
51 00:02:52,699 --> 00:02:59,949 5をクリックしてみると国会でありますね
52 00:02:56,349 --> 00:03:01,639 ね htp ローカルホスト8あじゃじゃ2ロッパ
53 00:02:59,949 --> 00:03:03,599 のなる子テーマ
54 00:03:01,639 --> 00:03:06,689 ちゃんと小長井の
55 00:03:03,599 --> 00:03:10,859 まあインストールされている場所ですよねこれね
56 00:03:06,689 --> 00:03:12,770 ここのパスを自動的に出力してくれています
57 00:03:10,860 --> 00:03:15,160 要は
58 00:03:12,770 --> 00:03:15,159 ここ
59 00:03:15,408 --> 00:03:25,019 の php タグ blog info のテンプレート言われるって言うのは
60 00:03:19,939 --> 00:03:29,740 この部分ですよねここを書いてくれているんだと味わえちゃいたいゼロパ鍋分
61 00:03:25,020 --> 00:03:30,840 ここが出力されているということを覚えておいてください
62 00:03:29,740 --> 00:03:33,700 はい
63 00:03:30,840 --> 00:03:36,979 で今日はじゃあまあその
64 00:03:33,699 --> 00:03:39,619 うまくできたんですけれどもさらにですね
65 00:03:36,979 --> 00:03:43,189 やってみましょうか
66 00:03:39,620 --> 00:03:46,379 single . php というのをやっていきたいんですよね
67 00:03:43,189 --> 00:03:50,729 これはどういうものかというと
68 00:03:46,379 --> 00:03:54,490 クリックするじゃないですか記事1記事に
69 00:03:50,729 --> 00:03:57,349 でクリックすればま確かに行くなと
70 00:03:54,490 --> 00:04:01,700 でもちょっと見てみましょうねー
71 00:03:57,349 --> 00:04:05,560 よしこれで2つ目初めての投稿ですコミッツキジがありますけど
72 00:04:01,699 --> 00:04:05,560 二つ目のところですクリックすると
73 00:04:06,360 --> 00:04:11,480 終わったのが変わってないかわかんないかばこんな感じですよね
74 00:04:09,689 --> 00:04:14,759 横になっています
75 00:04:11,479 --> 00:04:18,769 戻るボタンで1回戻って
76 00:04:14,759 --> 00:04:18,769 全部初めての投稿ですクリックすると
77 00:04:20,040 --> 00:04:26,669 初めての投稿です出てますね
78 00:04:22,769 --> 00:04:30,779 しかしですねあのなんかこう
79 00:04:26,668 --> 00:04:32,199 クリックした後のページって例えばこれは web side のビッグイメージだと
80 00:04:30,779 --> 00:04:37,189 したら
81 00:04:32,199 --> 00:04:43,110 入らないじゃないですかトップページにはこれはあってほしいけれども
82 00:04:37,189 --> 00:04:46,329 次のページ以降はこれはなくしたいなぁということがあると思うんですね
83 00:04:43,110 --> 00:04:50,288 そこで登場するのが
84 00:04:46,329 --> 00:04:54,938 single . php というテンプレートになります
85 00:04:50,288 --> 00:04:55,718 今は私が言ったのはそういうことだと聞いてやるとビッグイメージがどこでもついてき
86 00:04:54,939 --> 00:05:01,419 ちゃう
87 00:04:55,718 --> 00:05:03,990 なぜかというと記事の個別ページにも陰裂. php がテンプレートとして使われて
88 00:05:01,418 --> 00:05:03,990 いるからなんです
89 00:05:04,168 --> 00:05:12,448 じゃあ別にしたい big イメージなくして例えば濃い色を変えたりとかね
90 00:05:09,910 --> 00:05:16,710 いうことがあった場合には
91 00:05:12,449 --> 00:05:22,830 single . php を作成します
92 00:05:16,709 --> 00:05:24,329 トップページだけは index . php が採用されてクリックした後記事とか
93 00:05:22,829 --> 00:05:29,159 記事に対しては
94 00:05:24,329 --> 00:05:35,279 single . php が適用されるようにしてみましょう
95 00:05:29,160 --> 00:05:36,000 これはしてみましょうというか single . php と命名するとそうなるん
96 00:05:35,279 --> 00:05:38,568 ですね
97 00:05:36,000 --> 00:05:39,939 フォワードペース決まりです
98 00:05:38,569 --> 00:05:42,370 じゃあ
99 00:05:39,939 --> 00:05:47,620 ちょっとやってみましょうか
100 00:05:42,370 --> 00:05:50,680 新ビル. php をですね by テーマの中に作っていきます
101 00:05:47,620 --> 00:05:53,788 シングル psp new file
102 00:05:50,680 --> 00:05:53,788 10まず保存
103 00:05:53,848 --> 00:06:03,528 ここの命名がポイントでスイングるー. php
104 00:05:58,439 --> 00:06:07,830 スペル間違ないよねこういう名前をつけてあげると必ず wordpress は
105 00:06:03,528 --> 00:06:11,899 クリックした後このページを共有してくれるようになります
106 00:06:07,829 --> 00:06:18,550 じゃあ本当かどうかねじゃあこれはプロぬ
107 00:06:11,899 --> 00:06:20,000 スイングる. php シングル psp から出力されていますよ
108 00:06:18,550 --> 00:06:23,199 かけました
109 00:06:20,000 --> 00:06:27,209 ではこのトップページから
110 00:06:23,199 --> 00:06:27,209 ここをクリックしましょうかクリックすると
111 00:06:27,540 --> 00:06:34,319 うん from single . php て出ましたね
112 00:06:30,990 --> 00:06:35,590 さっきのファイルがどうやら使われているようです
113 00:06:34,319 --> 00:06:37,519 なので
114 00:06:35,589 --> 00:06:40,049 9
115 00:06:37,519 --> 00:06:43,709 スイング度と警視ぴに
116 00:06:40,050 --> 00:06:47,520 書いていきましょう変えていくといってもですね
117 00:06:43,709 --> 00:06:51,129 ここは in this . php を協議
118 00:06:47,519 --> 00:06:53,288 すべて選択して
119 00:06:51,129 --> 00:06:56,029 でコピーして
120 00:06:53,288 --> 00:06:58,509 方に貼るだけです
121 00:06:56,029 --> 00:07:03,369 貼って保存します
122 00:06:58,509 --> 00:07:06,819 そしてですねこの別々のもファイルになりましょうねここビッグイメージってもこの
123 00:07:03,370 --> 00:07:08,769 部分ですよねさっきの大きい画像これいらないじゃないですか
124 00:07:06,819 --> 00:07:09,829 これております
125 00:07:08,769 --> 00:07:11,599 で
126 00:07:09,829 --> 00:07:13,879 えっと
127 00:07:11,600 --> 00:07:16,800 そうですねぇ
128 00:07:13,879 --> 00:07:20,408 これで見てみましょう
129 00:07:16,800 --> 00:07:24,168 じゃあトップページこれで
130 00:07:20,408 --> 00:07:25,110 じゃあここクリックしますすると
131 00:07:24,168 --> 00:07:25,939 うん
132 00:07:25,110 --> 00:07:31,790 day
133 00:07:25,939 --> 00:07:33,639 big イメージはなくなりました別々のものが使われているということがわかります
134 00:07:31,790 --> 00:07:39,310 色も変えましょうか
135 00:07:33,639 --> 00:07:42,788 色もねじゃあボディにちょっと id でもっときますかね id
136 00:07:39,310 --> 00:07:47,968 スイングる缶加工が降っておいて
137 00:07:42,788 --> 00:07:47,968 スタイルシートにですね#スイングるー
138 00:07:49,209 --> 00:07:53,859 ボディ
139 00:07:50,579 --> 00:07:57,168 そのスペース空けないジェスチャーと新グルー
140 00:07:53,860 --> 00:07:59,509 は background
141 00:07:57,168 --> 00:08:04,149 シャープ
142 00:07:59,509 --> 00:08:04,149 エイドじゃあ9999 ff
143 00:08:04,968 --> 00:08:10,230 こうすると青っぽくなりました
144 00:08:07,939 --> 00:08:14,910 トップページ見てみると
145 00:08:10,230 --> 00:08:18,830 トップページはでこのピングのまんまです
146 00:08:14,910 --> 00:08:18,830 トップページピンクのまんまで2つ目は
147 00:08:20,259 --> 00:08:25,949 青になったと
148 00:08:21,449 --> 00:08:30,848 要するに別々のファイルにしましたので
149 00:08:25,949 --> 00:08:34,149 設定を変えることができるというわけです
150 00:08:30,848 --> 00:08:37,960 えわかりいただけるでしょうか
151 00:08:34,149 --> 00:08:41,470 ちょっとリンクもでもう一つ作っておきましょうここ
152 00:08:37,960 --> 00:08:46,840 二つ目の記事に行った時にバックとかね
153 00:08:41,470 --> 00:08:49,430 1入れたいんですけどもずうロッパってロゴをクリックするとトップページに帰れる
154 00:08:46,840 --> 00:08:53,209 ように行きましょうかね
155 00:08:49,429 --> 00:08:56,139 で2つムーススイング. pg のところここ
156 00:08:53,208 --> 00:08:59,159 予定一番をわかりやすいようにね
157 00:08:56,139 --> 00:08:59,159 こうしておきまして
158 00:08:59,539 --> 00:09:06,019 nh 列=ここは
159 00:09:04,230 --> 00:09:07,000 psp
160 00:09:06,019 --> 00:09:12,179 a
161 00:09:07,000 --> 00:09:13,340 とエコで出力しなさい豊富
162 00:09:12,179 --> 00:09:16,849 url
163 00:09:13,340 --> 00:09:18,579 これで多分いけるんじゃないかなぁと思います
164 00:09:16,850 --> 00:09:20,129 エコホーム言われる
165 00:09:18,578 --> 00:09:26,189 これで
166 00:09:20,129 --> 00:09:27,889 構成してみてその中でリンクになりましたリンクをクリックすると
167 00:09:26,190 --> 00:09:32,049 今
168 00:09:27,889 --> 00:09:32,048 あけましたねハローワールド
169 00:09:34,129 --> 00:09:38,629 でトップに戻る
170 00:09:36,950 --> 00:09:43,009 はい範囲
171 00:09:38,629 --> 00:09:46,639 いかがだったでしょうかねぇえーとこれで立った
172 00:09:43,009 --> 00:09:49,069 まあこれだけのコード人グループと pcb と index . php に
173 00:09:46,639 --> 00:09:52,509 スタイルシートこの3つだけですね
174 00:09:49,070 --> 00:09:53,860 このようなコンテンツを作ることができました
175 00:09:52,509 --> 00:09:58,059 あとは
176 00:09:53,860 --> 00:10:01,060 体裁 css でもっともっとねデザインを整えることによって
177 00:09:58,059 --> 00:10:06,759 ブログサイト作れてしまいます
178 00:10:01,059 --> 00:10:12,129 オリジナルで html と css の知識のある方はどんどん作れちゃうんですね
179 00:10:06,759 --> 00:10:14,470 なので江戸 wordpress のなんていうのかなすごさというのを少し理解して
180 00:10:12,129 --> 00:10:20,620 いただけたかなと思います
181 00:10:14,470 --> 00:10:25,690 じゃあ8基礎平和ですねこの辺でまあ次応用編という事になるんですけれどもこれを
182 00:10:20,620 --> 00:10:29,159 本格的なサイトに仕上げていきたいなと思います
183 00:10:25,690 --> 00:10:29,160 それではまた