ワードプレスによるホームページ移転日記 ～その6～
色々ありましたが六回目。ホームページ移動日記も最後になります。
...と言うことで、今回は動画関連のページをサムネイルで見れるような感じにします。
最後ですか。
なんかいろいろやったわね。
移動日記自体は最後だけど、番外編とかはやるかもしれないわね。
おぅ、それにメインの日記に紛れて色々実験とか考察とかもやるらしいからそっちが本編になる感じだな。
そうね。
では、最後の話行ってみましょう。どうするのかしら？
まずは固定ページを作って、CSSで色々組みます。
色々ですか？
色々です。
で、まぁ、ホームページの頭の部分にサイトのタイトル名とかでているでしょ。
あの部分とサイドバーっていう記事の横の付いている物はワードプレス準拠のものにしたいのよね。
そういえば今までの固定ページは元ページを改変しただけのものだったわね。
そうそう。
..ということで、ヘッダーに当たる部分は
<?php get_header(); ?>
と言う文字を入れてね。
出来たわ。
次にサイドバーが表示される予定の所には
<?php get_sidebar();?>
と言う文字を入れるの。
これも出来たわね。後はアップロードすればいいのかしら？
そうね。あげてもらえる？
オッケー、さくっと上げたわ。でも、サイドバーとヘッダーは見えるけど中身はスカスカね。
天龍ちゃんの頭の中身みたいねーー。
おう....やんのか！？
あら～、天龍ちゃんについての有る事無い事が雷ちゃんたちに伝わるのがお望みかしら？
わかった、わかった。あ～、やっぱり龍田には勝てねーわ。
わかればいいのよ。
ということで続きね。
記事の文が入るはずの部分に最初の方にやったように文字を入れるんだけど、前回とは違ってこんな感じに入れてもらえるかしら？
<?php
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('post_type=movie' . '&paged=' . $paged . '&posts_per_page=5');
?>
何も変わらないわよ。
表示部分が抜けているからね。
その後の記事表示をする部分には
<?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
<?php the_title('<h2>', '</h2>'); ?>
<?php the_post_thumbnail(); ?>
<?php the_excerpt(); ?>
<?php endwhile; ?>
こんな感じに入れてあげてね。
なんか色々でたわね。
それじゃあ説明に入るわね。
まず、最初の方の文で、$wp_queryって言う物の中に読み込ませたいデータを読み込ませてあげたの。
post_type=movieの部分が、カスタム投稿タイプで投稿されたデータを表しているわ。
動画研究はmovieという投稿タイプ名だから、movieを入れてあげたの。
で、後ろ側の&posts_per_page=5と言う部分で何個読ませるかを決めてあげるのよ。
種類と数を指定して、読み込ませるのですね。
で、後半に入るわね。
while ～の一文目と最後のendwhileはループの基本という感じで覚えてればいいわ。
で、タイトルとサムネイル画像と抜粋というのをwhileのループの中で毎回表示してあげたというわけ。
なんか色々でたけど直接ジャンプしたりは出来ないの？
うっかり忘れてたわ。
<a href="<?php the_permalink(); ?>" target="_self"> ～</a>
と言うのでさっきの文を挟むように入れてあげるのよ。whileループ全体を囲む感じね。
動画研究ページにジャンプできるようになったわ。
ああ、言い忘れてたけど、サイドバーの設定はヘッダーがないとCustom widgetsでは対応しないのよ。
そうなのですか？
なのです。
ヘッダー部分にある<?php wp_head(); ?>と言う文章があるのだけれど、それで今の状況に合わせてwordpressがデータを書き換えてくれるの。
だから、ワードプレスに合わせて色々やる場合。ウィジェット等を弄るとか色々あるのだけどそういったことをやる場合は最低でも<?php wp_head(); ?>だけは書いておいた方が良いわね。
勉強になったのです。
実は記事の数自体は5じゃなくて相当数あるのだけど、他の記事を見ることが今だと出来ないわよね。
そうね。
ということで、その辺も書いておきましょう。
サイドバーに当たる部分に最初に<?php get_sidebar();?>と書いたでしょう？
あの前に
<?php next_posts_link('NEXT'); ?>
<?php previous_posts_link('BACK'); ?>
と入れるの。
入れたわ。なんか妙な文字が出てページが切り替えられるようになったわね。
で、コレは何なのです？
next_postが読めるデータが有る場合は次のに切り替えると言う感じね。''で囲まれたところの文字が画面に出るのよ。
で、previous_が前のページに戻るものね。
何となくは理解したのです。
これで、一覧ページに小さい詳細を並べることも出来たし、終了ね。
....お疲れ様でした。
それでは次回以降は普通の日記的な何かでお会いするかもしれません。
| 固定リンク
| トラックバック (0)
このコーナーも五回目。今回は動画研究のサイドメニューに動画を貼り付けることにするわ。
動画ですか。見やすくて良さそうなのです。
前のページにはリンクでついてた物よね。
そうね。前はリンクとして外部プレーヤーで見る形だったけれど、今回はサイドメニューにするから、記事との区分けがついて見やすくなるわ。
早速初めましょ。まずは何をやるのかしら？
まずは、テキストウィジェットを前回の要領でサイドメニューに入れるわ。
出来たわ。前回やったし余裕ね。
出来たようね。次はテキストの欄に動画を再生するコードを書きましょう。
出来たけど、ムービーが違うわね。
そうね。どの動画投稿でも同じムービーが出るのはいろいろ問題ね。
なのです。
でも、今の状態だと全部の記事ごとにさっきのテキストを投入して入れるしか無い気がするわよね。
記事数は今のところ多くないし、大丈夫。頑張るわ。
流石にそれをやるのも大変だからプラグインを入れてプログラムで制御しましょう。
出来たわ。何に使うのかはいまいちわからないけれど。
簡単に言うとPHPの構文をテキストフィールドに入れても動くようにするプラグインね。
なるほど。...となると何となくやることが理解できた気がするわ。カスタムフィールドで画像をわけたように入れ替えるのね。
そうね。当たりよ。
出来たわ。まぁ、よくわからないけれど、画像の大きさは200x150くらいでいいのね。
まぁ、そのくらいでいいわ。サムネイル画像として、一覧表示する時に使うものだからね。
アイキャッチ画像を入れたら記事の上の方に画像が現れたわ。
本来はそれでいいのだけれど、今回の使い方はそういうのではないから消すことにするわね。
アイキャッチが出なくなったわ。
出来たみたいね。
出来たわ。
これで、カスタムフィールドの値によって動画を切り替えることが出来るようになったわね。
今回は四回目。動画研究というのが元のページにあったのだけど、そのページを作ることにしましょう。
このページをこのままコピーして、固定ページにすればいいのね。
このページは今後も更新されるし、作ったものがメニューとかに乗って欲しいページだからそれはダメね。
じゃあ、文章をそのまま本文に入れて...。
まぁ、そうなるかしら？面倒といえば面倒だけどね。
動画研究というページが増えたのです。
次はそのタイプの投稿をした場合にメニュー分けをしてくれたほうがいいから、分類側の方も作成するわね、
良くわからないけど、出来たわ。
それじゃあ、動画研究の欄に新しく投稿しましょう。
出来たけど、色々変ね。
フォーマットを整えてから入れてあげないといけないのよ。
これでも元とは違う気がするのです。
多少はね。
サイドのメニューの日記にこの項目がないのも気になるのです。
その辺はまた別のプラグインを使って設定するわ。Custom Post Type List Widgetというのを
表示されたわね。日記と動画研究という欄が。
他の動画研究もいくつかあるけど、それ自体の説明は省くわ。
そうですか？全部わかるほうが楽な気もしますが。
場合によって切り替えるほうが見やすさ等も良くなって綺麗になるのよ。ウィジェット欄の縦の長さもあるわけだしね。
で、どうするのよ。
それは別に入れたプラグインでやるわ。TS Custom Widgetsというプラグインで、簡単にいえば条件を指定して再度メニュー等を切り替える際に使うプラグインね。
出来たわ。
これで、動画研究は動画研究だけ、日記は日記ページだけで見れるようになったわ。
これで終わりかしら？
そうね、今日のところはこの辺で終了。
今回は三回目。ですが、今回は今後のことを考えて色々準備してみましょう。
準備なのです
具体的に何をやるのよ。
今後のことを考えて、今のテーマを利用した子テーマと言うのを作っておきましょう。
style.cssの中には文を入れておくのよね。
そうね。とりあえず
なんかMALって言うテーマが表示されたのです。
そしたら、有効化して投稿ページを閲覧してみましょう。
なんか殺風景なホームページになったわね
何も指定してないとそうなるわ。
前のホームページに戻ったのです。
そうね。コレでとりあえずは好きなようにスタイルシートをいじれるようになったわ。
なんかバグっぽい文字が出てるのです。
MENUは外部で読ませているのでそれも持ってこないと動いてくれないのよ。
今度はうまく行ったわね
ちなみにメニュー等だけを外部に配置しておいて本体で読み込ませるのは
親子関係？
提督が親で艦娘の私達が子供ってことね。ケッコンカッコカリで夫婦になれるわ
そうじゃなくて、ページの上下関係を作るのよ。
出来たわ。見やすくなるのはいいことね。
昨日この辺りのページをしていた時にやればよかった気もするのです。
ま...まぁ、日記の製作者も今鋭意勉強中だから仕方ないわね。
カスタム..ポスト..ポストに手紙を入れるソフト？。
残念。カスタム投稿というものをやるためのプラグインよ。
終わったわ。
お疲れ様。今回入れたプラグインは次回のカスタム投稿で色々使うので事前に見ておくのもいいかもね。
本日は二回目、今回は秋姉妹雀のページを完成させちゃいましょう。
全部完成させるのね。頑張るわ。
では、前回のホームページから、貼られているリンクをクリックしてみましょう
404NotFoundとか出ているのです。
ワードプレスのリンクは固定ページから表示の所にカーソルを合わせると出る、http://tms.sakura.tv/wordpress/?page_id=17というのをリンクの所に貼ってやればいいのよ。
ちなみに短縮リンクだと ./?page id=17になるわね。
他のページもひと通りコピーしてリンク張って終わり？今回は楽勝ね。
面倒くさい作業自体は多いけどやることは作業ね。でも、それだけでは面白くないのでキャラクター紹介ページを今後作りやすいようにしましょう。
良くわからない文章です。これ、何の意味があるのですか？
簡単に言うと、投稿されたデータを読んで表示するっていう内容をプログラム的に書いているのよ。
文章の長さ的には変わらないし、前のままでもいいんじゃない？
確かにこれ一個だったら、このままでもいい気がするわね。
そうね、楽できるなら楽したいわ。
と、言うことで書いた文章を直接反映できるようにしてみたのよ。
文字は書いたとおりになったけど、絵とかは前のままね。
そうね。こういう時はカスタムフィールドというのを使うといいわ。
出来たわ。
出来たら、元のホームページのデータのキャラクターの記述がある所
難しそうです。
まぁ、難しそうだけどやればそのとうりに動くから試行錯誤してみてね。
どうにか出来たわ。
お疲れ様。今日のところはこの辺で終了にしましょう。
裏作業は凄く数が多くて大変だったのです。
そうね、数が多いとそれなりに大変だから仕方ないわ。
初めまして、ワードプレスでホームページを作る日記の講師役、龍田です。
ワードプレスってなんです？
ブログとかを作りやすいように作られたホームページ制作ソフトね。
すごいのです...多分。
よくわからないみたいだからさくっとホームページを作ってみましょう。
私にまかせて。
流石に何も説明しないで雷ちゃんに任せる訳にはいかないわ。天龍ちゃんに作ってもらってるから見てみましょう。
さくっと作っといたぜ。トップページってのはリンクとかあればいいんだろ？
天龍ちゃんはやっぱりどこかアタマが悪いみたいね。
なんだと。喧嘩売ってんのか。大体ちゃんとトップにリンクは張ってあるだろう。
張ってあるけど、前のトップとは似ても似つかないでしょう。
だって、文章しか書けないだろう。これ。
それはブログとして書いてるからであって、別のページを作れば良いのよ。
任せて、固定ページを新しく作ればいいのね。
そうよ。
固定ページを作ったけどブログみたいなのしか書けないのです。
固定ページはちゃんと設定してあげないと特別なページとして認識しないわ。
何処に置くのです？
ワードプレスのテーマが置いてあるところね。style.cssとか色々置いてある場所よ。
置いたわ。それでどーするの？
固定ページを制作して、テンプレートでさっきの登録名のを選ぶの。
出来た..けど。これなんにも表示されてないわね。
前のホームページで使っていた絵とかが入ってないからよ。
やっぱり変わってないわよ。
慌てない。これだけじゃダメだから元ホームページのURLリンクも変えておくわ。
更新したら色々出てきたのです。
これで大丈夫ね。固定ページに乗っけて今までのサーバーで使っていたホームページをそのまま記述だけ変えて登録で稼働させることが出来るわよ。
まかせて、今までやったことを使って全部コピーしてやればいいのね。ワードプレスも楽勝ね。
たしかにそれでも良いような気がするけれど...でも折角移動させるんなら色々と変えたりしたいじゃない。
移動した意味があんまりない気はするのです。
ということで、次回に続くわ。
