« ワードプレスによるホームページ移転日記 ~その5~ | トップページ

ワードプレスによるホームページ移転日記 ~その6~

39157467_p1  色々ありましたが六回目。ホームページ移動日記も最後になります。

...と言うことで、今回は動画関連のページをサムネイルで見れるような感じにします。

39157467_p7  最後ですか。

40551300_p5  なんかいろいろやったわね。

39157467_p1_2  移動日記自体は最後だけど、番外編とかはやるかもしれないわね。

39157467_p3  おぅ、それにメインの日記に紛れて色々実験とか考察とかもやるらしいからそっちが本編になる感じだな。

39157467_p1_4  そうね。

40551300_p5_2  では、最後の話行ってみましょう。どうするのかしら?

39157467_p1_5  まずは固定ページを作って、CSSで色々組みます。

39157467_p7_2  色々ですか?

39157467_p1_6  色々です。

で、まぁ、ホームページの頭の部分にサイトのタイトル名とかでているでしょ。

あの部分とサイドバーっていう記事の横の付いている物はワードプレス準拠のものにしたいのよね。

40551300_p5_3  そういえば今までの固定ページは元ページを改変しただけのものだったわね。

39157467_p1_7  そうそう。

..ということで、ヘッダーに当たる部分は

<?php get_header(); ?>

と言う文字を入れてね。

40551300_p5_4  出来たわ。

39157467_p1_9  次にサイドバーが表示される予定の所には

<?php get_sidebar();?>

と言う文字を入れるの。

40551300_p5_5  これも出来たわね。後はアップロードすればいいのかしら?

39157467_p1_10  そうね。あげてもらえる?

40551300_p5_6  オッケー、さくっと上げたわ。でも、サイドバーとヘッダーは見えるけど中身はスカスカね。

Ws000181

39157467_p1_11  天龍ちゃんの頭の中身みたいねーー。

39157467_p3_2  おう....やんのか!?

39157467_p1_12  あら~、天龍ちゃんについての有る事無い事が雷ちゃんたちに伝わるのがお望みかしら?

39157467_p3_3  わかった、わかった。あ~、やっぱり龍田には勝てねーわ。

39157467_p1_13  わかればいいのよ。

ということで続きね。

記事の文が入るはずの部分に最初の方にやったように文字を入れるんだけど、前回とは違ってこんな感じに入れてもらえるかしら?

<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('post_type=movie' . '&paged=' . $paged . '&posts_per_page=5');
?>

40551300_p5_7  何も変わらないわよ。

39157467_p1_14  表示部分が抜けているからね。

その後の記事表示をする部分には

<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php the_title('<h2>', '</h2>'); ?>
<?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
<?php endwhile; ?>

こんな感じに入れてあげてね。

40551300_p5_8  なんか色々でたわね。

39157467_p1_15  それじゃあ説明に入るわね。

まず、最初の方の文で、$wp_queryって言う物の中に読み込ませたいデータを読み込ませてあげたの。

post_type=movieの部分が、カスタム投稿タイプで投稿されたデータを表しているわ。

動画研究はmovieという投稿タイプ名だから、movieを入れてあげたの。

で、後ろ側の&posts_per_page=5と言う部分で何個読ませるかを決めてあげるのよ。

39157467_p7_3  種類と数を指定して、読み込ませるのですね。

39157467_p1_16  で、後半に入るわね。

while ~の一文目と最後のendwhileはループの基本という感じで覚えてればいいわ。

で、タイトルとサムネイル画像と抜粋というのをwhileのループの中で毎回表示してあげたというわけ。

40551300_p5_9  なんか色々でたけど直接ジャンプしたりは出来ないの?

39157467_p1_17  うっかり忘れてたわ。

<a href="<?php the_permalink(); ?>" target="_self"> ~</a>

と言うのでさっきの文を挟むように入れてあげるのよ。whileループ全体を囲む感じね。

40551300_p5_10  動画研究ページにジャンプできるようになったわ。

39157467_p1_18  ああ、言い忘れてたけど、サイドバーの設定はヘッダーがないとCustom widgetsでは対応しないのよ。

39157467_p7_4  そうなのですか?

39157467_p1_19  なのです。

ヘッダー部分にある<?php wp_head(); ?>と言う文章があるのだけれど、それで今の状況に合わせてwordpressがデータを書き換えてくれるの。

だから、ワードプレスに合わせて色々やる場合。ウィジェット等を弄るとか色々あるのだけどそういったことをやる場合は最低でも<?php wp_head(); ?>だけは書いておいた方が良いわね。

39157467_p7_5    勉強になったのです。

39157467_p1_21  実は記事の数自体は5じゃなくて相当数あるのだけど、他の記事を見ることが今だと出来ないわよね。

40551300_p5_12  そうね。

39157467_p1_22  ということで、その辺も書いておきましょう。

サイドバーに当たる部分に最初に<?php get_sidebar();?>と書いたでしょう?

あの前に

<?php next_posts_link('NEXT'); ?>
<?php previous_posts_link('BACK'); ?>

と入れるの。

40551300_p5_13  入れたわ。なんか妙な文字が出てページが切り替えられるようになったわね。

Ws000185

39157467_p7_6  で、コレは何なのです?

39157467_p1_24  next_postが読めるデータが有る場合は次のに切り替えると言う感じね。''で囲まれたところの文字が画面に出るのよ。

で、previous_が前のページに戻るものね。

39157467_p7_7  何となくは理解したのです。

39157467_p1_25  これで、一覧ページに小さい詳細を並べることも出来たし、終了ね。

....お疲れ様でした。

それでは次回以降は普通の日記的な何かでお会いするかもしれません。

|

« ワードプレスによるホームページ移転日記 ~その5~ | トップページ

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/216116/59318081

この記事へのトラックバック一覧です: ワードプレスによるホームページ移転日記 ~その6~:

« ワードプレスによるホームページ移転日記 ~その5~ | トップページ