読者です 読者をやめる 読者になる 読者になる

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

カスタマイズ - ニュース・お知らせページを作成










WordPressの機能を使わずにページ作成

  • WordPressの機能は使わずに、HTML+CSSだけで「最新ニュース」と「過去のニュース」のページを作成します
  • 最新ニュースのページ「top.html」
  • 過去のニュースのページ(月別)「month.html」


《top.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ニュース</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h1>WordPressで作るニュースサイト</h1>
<article class="news">
<h2>NEWS</h2>
<form action="#">
<select onchange="if (value != 'none') {location.href = value;}">
<option value="none">記事アーカイブ</option>
<option value="〜">2016年2月</option>
<option value="〜">2016年1月</option>
<option value="〜">2015年12月</option>
<option value="〜">2015年11月</option>
</select>
</form>
<h3>ニュースタイトルA</h3>
<p class="date"><span class="fa fa-calendar"></span>2016年2月12日</p>
<p>ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。</p>
<p>ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。</p>
<h3>ニュースタイトルB</h3>
<p class="date"><span class="fa fa-calendar"></span>2016年2月09日</p>
<p>ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です</p>
<h3>ニュースタイトルC</h3>
<p class="date"><span class="fa fa-calendar"></span>2016年2月02日</p>
<p>ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。</p>
<p>ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。</p>
</article><!-- /article -->
</div><!-- /.container -->
</body>
</html>


《month.html》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ニュース:2016年2月</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="container">
<h1>WordPressで作るニュースサイト</h1>
<article class="news">
<h2>NEWS</h2>
<p class="month">2016年2月</p>
<form action="#">
<select onchange="if (value != 'none') {location.href = value;}">
<option value="none">記事アーカイブ</option>
<option value="〜">2016年2月</option>
<option value="〜">2016年1月</option>
<option value="〜">2015年12月</option>
<option value="〜">2015年11月</option>
</select>
</form>
<h3>ニュースタイトルA</h3>
<p class="date"><span class="fa fa-calendar"></span>2016年2月11日</p>
<p>ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。</p>
<p>ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。ニュース記事Aの文章です。</p>
<h3>ニュースタイトルB</h3>
<p class="date"><span class="fa fa-calendar"></span>2016年2月09日</p>
<p>ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です。ニュース記事Bの文章です</p>
<h3>ニュースタイトルC</h3>
<p class="date"><span class="fa fa-calendar"></span>2016年2月02日</p>
<p>ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。</p>
<p>ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。ニュース記事Cの文章です。</p>
</article><!-- /article -->
</div><!-- /.container -->
</body>
</html>


《style.css

@charset "UTF-8";

/* reset
------------------------------------ */
html,body,h1,h2,h3,p ,form{
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}

/* body
------------------------------------ */
body {
  font-size: 16px;
  background: #FFF;
}

/* layout
------------------------------------ */
.container {
  width: 600px;
  margin: 50px auto;
}
h1 {
  margin-bottom: 30px;
}

/* news
------------------------------------ */
.news h2  {
  margin-bottom: 10px;
  text-align: center;
}
.news p.month  {
  font-size: 18px;
  text-align: center;
}
.news h3  {
  border-bottom: solid 2px #0AC;
  margin: 30px auto 0;
  padding-bottom: 8px;
}
.news p  {
  line-height: 1.5;
}
.news .date, .news form  {
  text-align: right;
  margin: 8px 0 16px 0;
}
.news span {
  margin-right: 8px;
}
.news select  {
  width: 160px;
  font-size: 16px;
}

コンテンツデータの準備

  • WordPressから利用するコンテンツデータをコンテンツデータをデータベース上に用意します
  • 「タイトル」「日付」「文章のデータ」を準備
データベースに保存する記事
  • phpMyAdminから記事を挿入する(TRAVELの日付を書き換える)

テンプレート化

  • WordPressの機能を使わずに作成したページをテンプレート化する
  • WordPress →「wp-content」→「themes」→「cms」フォルダーを作成
  • WordPressのテンプレートファイルをフォルダー内に準備する「style.php」「index.php」「date.php」「screenshot.jpg」


最新記事と過去の記事(月別)のページを作成






《header.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title>ニュース</title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>

《index.php

<?php get_header(); ?>
<div class="container">

<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>

<article class="news">

<h2>新しい記事</h2>

<form action="#">
<select onChange="if (value != 'none') {location.href = value;}">
<option value="none">記事アーカイブ</option>
<?php wp_get_archives('format=option'); ?>
</select>
</form>

<?php query_posts('showposts=3'); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<h3><?php the_title(); ?></h3>
<p class="date"><span class="fa fa-calendar"></span><?php the_date('Y年n月j日'); ?></p>

<?php the_content(); ?>

<?php endwhile; endif; ?>

</article><!-- /article -->

</div><!-- /.container -->
</body>
</html>

《date.php

<?php get_header(); ?>
<div class="container">
<h1><a href="<?php echo home_url('/'); ?>"><?php bloginfo('name'); ?></a></h1>
<article class="news">
<h2>過去の記事</h2>
<p class="month"><?php echo get_post_time( 'Y年m月' ); ?></p>

<form action="#">
<select onchange="if (value != 'none') {location.href = value;}">
<option value="none">記事アーカイブ</option>
<?php wp_get_archives('format=option'); ?>
</select>
</form>

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<p class="date"><span class="fa fa-calendar"></span><?php the_date('Y年n月j日'); ?></p>

<?php the_content(); ?>

<?php endwhile; endif; ?>

</article><!-- /article -->
</div><!-- /.container -->
</body>
</html>