• HOME
  • CMS
  • Wordpress
  • 【WordPress】Twenty Thirty を使ってサイトを作ってみた

【WordPress】Twenty Thirty を使ってサイトを作ってみた

Web Design Wordpress
139

フリーランスとなったことを告知したところ、たくさんの方から応援のお言葉を頂きました。

本当にありがとうございます！

さて、今回はこのサイトを作ってみたことを書いてみようと思います。

サーバーを準備する

ホームページを公開するには、まずドメインとサーバーが必要です。以前までロリポップを使用していましたが、先日のハッキング事件もあり他のサーバー会社に変更することにしました。

今回は、VALUE DOMAINとCORESERVERを使用しました。データベースの作成が簡単なのでこちらにしてみました。

最新のWordPressをインストールする

まずはWordPress用にMySQLを作成します。インストール方法は色々なブログで紹介していますので、そちらを参考にさせて頂きました。

最新のWordPressをインストールすると、デフォルトのテーマがTwenty Thirtyになっていました。

STEREO KITCHEN Just another WordPress site

テーマをカスタマイズしていく

今回はふわっとした計画で進めていたのですが、外せない要素がありました。

  1. レスポンシブデザインにする。
  2. 動きのあるキャッチイメージにする。
  3. トップページにブログの最新記事をサムネイル付きで表示する。

1.レスポンシブデザインにする

これに関しては、Twenty Thirtyのままでも適用されます。なのでCSSを丸ごと入れ替えることはしませんでした。使えるものは使ってしまおうということですね。もちろん、最終的にデザインのために調整は必要になってきます。

2.動きのあるキャッチイメージにする

まずレスポンシブなのにFLASHは論外なので使用せず。

jQueryの色々なプラグインも紹介されていますが、今回はこちらのプラグインを使用してみました。

レスポンシブに対応しており、CSS3を使用してきれいな動きを実現しています。古いIEは別の動きに変えてくれます。なのでIEも気にせず使用することができます。

3.トップページにブログの最新記事をサムネイル付きで表示する

デフォルトのテーマには、front-page.phpがありません。外観 > カスタマイズでトップページのページを選択する仕様になっています。なのでまずはfront-page.phpを作りましょう。

すでに設置してあるpage.phpをコピーしてfront-page.phpに名前を変更。その後、必要な記述をしていきます。



<ul>
 <?php $posts = get_posts('numberposts=10'); //最新10件を表示 foreach($posts as $post): ?>
 
<li class="cf">

<div class="right">
 <?php the_category(); ?>
 
<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><span><?php the_title(); ?></span></a></h3>

 
<h4><?php echo get_post_meta($post->ID, _aioseop_description, true); ?></h4>

 </div>

 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="thumbnail_link">
 <?php if (has_post_thumbnail()): $title = get_the_title(); the_post_thumbnail(array(200,200), array('alt' => $title, 'title' => $title));
 else: //アイキャッチ画像がなかった場合の処理
 ?>
 <img src="<?php bloginfo('template_url'); ?>/images/no_thumb.png" title="<?php the_title(); ?>" alt="<?php the_title(); ?>" width="64" height="64" />
 <?php endif; ?>
 </a>
 </li>

 <?php endforeach; ?>
 </ul>

できあがり

STEREO KITCHEN Webデザイナー土橋春樹です。デザインやCMSを使用したコーディングも承っています。

最後までIEにはつまづきました。メインイメージの部分がよくわからない幅で固定されたり、サイドバーが横長に伸びて画面からはみ出してしまったり・・・このせいでオープンが１日遅れました。

サイトは随時リニューアルをしていこうと思っています。あと今はコンテンツがブログくらいなので、ポートフォリオなども用意していこうと思います。

それでは。

関連記事