基金訓練(Webデザイン・プログラミング科)の77日目に行ってまいりました。
77日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
77日目の内容は下記のとおりです。
１．前回のトップページ(固定ページ)にブログ新着記事を表示に記事本文を追加
前回、更新日時の新しい順に５件の記事の投稿日時とタイトルをトップページに表示しましたが、プラスして記事本文を表示するようにします。
|
|
<ul> <?php $myposts=get_posts('numberposts=5&orderby=post_modified'); foreach($myposts as $post): ?> <li> <?php the_time('y年n月j日'); ?> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?><br /> <?php echo mb_substr($post->post_content,0,30) ?>・・・ </a> </li> <?php endforeach; ?> </ul> |
説明
|
|
<?php echo mb_substr($post->post_content,0,30) ?> |
記事本文の1文字目から30字を表示します。
２．トップページ(固定ページ)に任意のカテゴリーのブログ新着記事を表示
トップページで見せたい記事を「お知らせ」等のカテゴリーにしておいて、そのカテゴリーの記事のみを表示します。
|
|
<ul> <?php $myposts=get_posts('category="3"&numberposts=5&orderby=post_modified'); foreach($myposts as $post): ?> <li> <?php the_time('y年n月j日'); ?> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?><br /> <?php echo mb_substr($post->post_content,0,30) ?>・・・ </a> </li> <?php endforeach; ?> </ul> |
説明
|
|
<?php $myposts=get_posts('category="3"&numberposts=5&orderby=post_modified'); |
配列$mypostsに、カテゴリーIDが3の記事の、更新日時順に５件の記事内の要素を代入します。
※カテゴリーIDは、PhpMyAdminでwp_termsテーブルをみれば、調べることができます。
基金訓練(Webデザイン・プログラミング科)の76日目に行ってまいりました。
76日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
76日目の内容は下記のとおりです。
トップページ(固定ページ)にブログの新着記事を表示
top.phpに下記を記述すると、更新日時の新しい順に５件の記事の投稿日時とタイトルが表示されます。(タイトルにはリンクが張られます。)
|
|
<ul> <?php $myposts=get_posts('numberposts=5&orderby=post_modified'); foreach($myposts as $post): ?> <li> <?php the_time('y年n月j日'); ?> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </li> <?php endforeach; ?> </ul> |
説明
|
|
<?php $myposts=get_posts('numberposts=5&orderby=post_modified'); ?> |
配列$mypostsに、更新日時順に５件の記事内の要素を代入します。
|
|
<?php foreach($myposts as $post): ?>~<?php endforeach; ?> |
変数$postに、配列$mypostsの要素を代入した後 ～ を実行 を、配列数だけ繰り返します。
|
|
<?php the_time('y年n月j日'); ?> |
変数$postの要素の中の、投稿日時を表示します。
|
|
<?php the_permalink(); ?> |
変数$postの要素の中の、パーマリンクを表示します。
変数$postの要素の中の、記事タイトルを表示します。
基金訓練(Webデザイン・プログラミング科)の74日目に行ってまいりました。
74日目は、WordPressの実習です。
デフォルトのテンプレート(twentyten)をカスタマイズして、トップページを固定ページにしたサイトを作成していきます。
72日目その２と74日目の内容は下記のとおりです。
１．固定ページのテンプレート作成(テンプレートですが、各々の固定ページの専用テンプレートになります。)
- ￥wordpress￥wp-content￥themes￥twentyten フォルダ内のindex.phpを固定ページの数だけ同じフォルダにコピーします。
- それぞれ、top.php、info.phpなどのファイル名に変更します。
- テキストエディタで開いて、上部のコメント(／＊＊～＊／の部分)をすべて削除し、top.phpの場合は、
／＊＊
＊Template Name: TOP
＊／
に置き換えます。TOPの部分がテンプレート名になるので、info.phpの場合は、その部分をINFOにします。
- それぞれのphpファイルの
<div id="content" role="main">～</div><!– #content –>
をすべて消し、前に準備しておいたHTMLの<div id="c_contents">～</div>部分をペーストします。
- 1カラムにする時は、
<?php get_sidebar(); ?>
を削除します。
- 編集したphpファイルをUTF-8Nで保存します。
(前回書き忘れましたが、header.php、footer.phpもUTF-8Nで保存しておきます。)
２．管理画面で固定ページの作成
- WordPressのダッシュボードのメニューから、ページ→新規追加 を選択すると、「新規ページを追加」画面になります。
- タイトルを「トップページ」と打ち込み、右の「ページ属性」の「テンプレート」で、「TOP」を選択します。
- タイトルの下の「パーマリンク」の編集ボタンを押し、「トップページ」を半角英字の「top」に変更して、OKボタンを押します。
- 右の公開ボタンを押すと、ページの追加が確定します。
- 同様に、2ページ目以降の固定ページもページ追加していきます。
- ブログページも新規ページとして固定ページと同様に追加しますが、｢テンプレート｣は｢デフォルトテンプレート｣にします。
３．トップページをフロントページに設定
- WordPressのダッシュボードのメニューから、設定→表示設定 を選択すると、「表示設定」画面になります。
- ｢フロントページの表示｣項目で、｢固定ページ｣を選択します。
- ｢フロントページ｣項目で、｢トップページ｣(先ほど作ったページのトップページのタイトル)を選択します。
- ｢投稿ページ｣項目で、｢ブログ｣(先ほど作ったページのブログのタイトル)を選択します。
- 変更を保存ボタンを押して確定します。
４．ブラウザで確認しながらcssファイル、phpファイルを修正
- グローバルナビなどのページへのリンクのパス名は、
<?php bloginfo( ‘url’ ); ?> /パーマリンクで設定した文字(トップページの場合はtop)
にします。
- ブラウザで各ページを確認しながら、￥wordpress￥css￥c_style.cssや、
￥wordpress￥wp-content￥themes￥twntyten￥style.cssを修正して、表示を整えて完成です。
sei2が、気になる家電、WEBデザイン、WEBプログラミング、基金訓練や日常の出来事を書いたブログです。
