記事一覧
- 2017/08/02
- N 固定ページで投稿の一覧表示の実装【初心者のためのWORDPRESS -07-】
- :未分類
- 2017/08/02
- N Hello world! Updated!
- :未分類
固定ページで投稿の一覧表示の実装【初心者のためのWORDPRESS -07-】2017/08/02 23:24
デザイナーの野田沢です。
今回は固定ページでの投稿一覧を作成してみようと思います。
投稿の一覧のページはブログ専用サイトではなく企業サイトの新着情報などでWPを使用する場合には多く活用されると思います。
今回ご紹介する方法は固定ページでの表示なので、ある程度の一覧情報ならテンプレート化して使っていけると思います。
h1111111111
h33333333333
h44444444
h5555555
h666666666
- list_1
- list_2
- list_3
- list_4
- list_1
- 1
- 2
- 3
- 4
Ī
<?php $paged = (int) get_query_var(‘paged’); $args = array( ‘posts_per_page’ => 4,<br ?--> ‘paged’ => $paged, ‘orderby’ => ‘post_date’, ‘order’ => ‘DESC’, ‘post_type’ => ‘post’, ‘post_status’ => ‘publish’ ); $the_query = new WP_Query($args); if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); get_template_part( ‘bloglist’, get_post_format() ); endwhile; endif; wp_reset_postdata(); ?>
dddddd
aaaaa
ddddddaaaax2
bbbx2
dddd
v
aaa
- 111
- 222
- 333
- 44
- 111
- aaa
- 333
- 444
- 111
固定ページ用一覧表示PHP
- まずは下記のコードを確認してください。このPHPが固定ページで一覧を表示するためのコードです。
111111 | 222222 |
333333333 | |
44444444444 | 5555555555555 |
aaaaaaaaaaaaa | bbbbbbbbbbbbbbbbbbbb |
aaaaaaaaaaaaaaaaaaaaaa
簡単にコードの説明をすると4行目のposts_per_pageは表示する記事の件数です。
私は4件と設定してありますが、5件目以上の記事はページングを設定してページ送りにて表示させる予定です。ページングについては次回の記事で詳しくご紹介したいと思います。
基本的にはコピペで実装できますが、1つ注意点があります。それは14行目にあるget_template_partと言う関数です。
上記の私の場合はbloglistという引き数がそれにあたります。
このbloglistでリピートさせる記事の中身を呼び出しています。
お察しの通り、このリピートさせる中身を作成していないと、上記のPHPコードを入れても何も表示されません。
bloglistと言う名前は任意で変更してください。
記事を表示させる一覧ページ用のテンプレート作成
では上記で説明したbloglistの中身を作成します。
私は上記PHPコードを ul タグで括り、中のリストをリピートさせて記事一覧を制作しました。
まずはget_template_partで呼び出している同じ名前のPHPファイルを新しく作成しましょう。今回はbloglist.phpとなります。
このPHPファイルの中身は至ってシンプルでリピートさせたいリストの中身をhtmlコードで記述するだけです。 PHPコードは一切必要ありません。
固定ページと同じディレクトリにbloglist.phpを保存すれば完成です。
Hello world! Updated!2017/08/02 16:32
Welcome to WordPress. This is your first post. Updated by RS CSV Importer!
会社概要
見出し | GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。 |
---|---|
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
会社概要(※角丸ボックスを使わない場合のサンプル)
見出し | GoogleMapで地図を貼り付けたい人は解説がありますのでご覧下さい。 |
---|---|
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
見出し | ここに説明など入れて下さい。サンプルテキスト。 |
当テンプレートについて
当テンプレートはhtml5+CSS3(レスポンシブWEBデザイン)です
当テンプレートは、パソコン、スマホ、タブレットでhtml共通のレスポンシブWEBデザインになっております。
古いブラウザ(※特にIE8以下)で閲覧した場合にCSSの一部が適用されない(各を丸くする加工やグラデーションなどの加工等)のでご注意下さい。
各デバイスごとのレイアウトチェックは
最終的なチェックは実際のタブレットやスマホで行うのがおすすめですが、臨時チェックは最新のブラウザ(IEならIE10以降)で行う事もできます。ブラウザの幅を狭くしていくと、各端末サイズに合わせたレイアウトになります。
注意:cssはリアルタイムで反映されますが、javascript(js)は ブラウザを再読み込みさせないと反映されないので、レイアウトが切り替わったらブラウザを再読み込みさせる事をおすすめします。javascriptは小さい端末用の開閉ブロックなどに使われています。
各デバイス用のスタイル変更は
cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。
cssフォルダのstyle.cssファイルで行って下さい。詳しい説明も入っています。
前半はパソコン環境を含めた全端末の共通設定になります。中盤以降、各端末向けのスタイルが追加設定されています。
media=" (~)"の「~」部分でcssを切り替えるディスプレイのサイズを設定しています。ここは必要に応じて変更も可能ですが、変更した場合、htmlの下部のjavascriptのウィンドウサイズの条件指定も合わせて変更しなくてはならないものもあります。
スマホ環境(※幅480以下の環境)でのみ
メインメニューが折りたたみ式(3本バーアイコン化)になります。バーのスタイル設定もstyle.cssで行う事ができます。
画像ベースは
「base」フォルダに入っています。
写真の元素材を当社運営の
PHOTO-CHIPSや
DECORUTOで配布している場合もございます。
角丸のボックスは使わない事もできます。
class="box"の指定がなければこのブロックのように背景に直接テキストがのります。
当テンプレートの使い方
注意:当テンプレートにはメニューが「2箇所」入っています
パソコンなどの大きな端末「menubar(幅481px以上)」向けと、スマホなどの小さな端末「menubar-s(幅480px以下)」向けがそれぞれ入っています。大きな端末向けは編集ソフトで見れると思いますが、小さな端末向けは見えないと思いますのでhtml側で編集して下さい。小さな端末向けパーツはhtmlの上の方にあります。
注意:当テンプレートにはロゴ画像が2つ入っています
上のメニュー同様、ロゴ画像も2種類あります。大きな端末向けはlogo.pngで小さい端末向けはlogo_s.pngです。両方準備して下さい。
titleタグ、copyright、metaタグ、他の設定
■titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>個人サイト向け 無料ホームページテンプレート tp_simple11</title>
を編集しましょう。
あなたのホームページ名が「Sample Site」だとすれば、
<title>Sample Site</title>
とすればOKです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
■copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Sample Site All Rights Reserved.
の「Sample Site」部分もあなたのサイト名に変更します。
■metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
続いて、その下の行の
content="キーワード1,キーワード2,~~~"
も設定します。ここはサイトに関係のあるキーワードを入れる箇所です。10個前後ぐらいあれば充分です。キーワード間はカンマ「,」で区切ります。
■h1ロゴのaltタグも変更しましょう。
html側に
alt="SAMPLE LOGO"
となっている箇所があるので、この「SAMPLE LOGO」もあなたのサイト名に変更しましょう。
トップページのスライドショーについて
css3を使ったスライドショーになっています。古いブラウザ(主にIE8以下)だと最後の1枚だけが固定表示されるので考慮して準備して下さい。
設定は全てcssフォルダのslide.cssで行っています。説明もありますので変更したい人は調整してみて下さい。
css3スライドショーについての詳しい解説はこちら。
プレビューでチェックすると警告メッセージが出る場合(一部ブラウザ対象)
主にjavascript(jsファイル)ファイルによって出る警告ですが、WEB上では出ません。また、この警告が出ている間は効果を見る事ができないので、警告メッセージ内でクリックして解除してあげて下さい。これにより効果がちゃんと見れるようになります。