hpb検証、Wpちょっとだけカスタマイズ

ホームページビルダー無料お試し版のテーマがあまり気に入らないので、
Wp公式テーマのTwenty Thirteen に変更してみた。

ホームページビルダーを触ってみた感触

◎好感度

・Wpのインストール・DB設定までhpbから一気にできてしまうこと。

・hpbのテーマは、固定ページとブログ記事ページの組み合わせでサイトの体裁をとっているため、構造やレイアウトに大きな不満がなければ、Wpのテーマを利用するよりもカスタマイズの必要が少ない。背景画像などの入れ替え等は楽なので、とりあえずサイトを簡単に導入できる。

・問い合わせフォームやアクセス解析もバンドルされているので、サイトの基本的な機能が最初から備わっている。

・メニュー構成から、固定ページ+投稿記事のセットを作成できるので、会社サイトなどでは商品ページやFAQ、ブログなどを増やしていくことが出来る。カテゴリでブログ記事を分類するのと違って、個別の調整が可能(カスタム投稿? ブログではなく、CMSとしてサイト構成できる)。

・基礎的なCSSの知識で、ビジュアルエディタを確認しながらCSS編集ができる。

・サポートが受けられる(Wp部分はどうなんだろう?)

*参考サイト WordPress Builder

不要な場合

・レンタルサーバーがWpの自動インストールに対応していればWp導入は楽なので、hpbがなくても問題がない。ただし、FTP接続でインストール場所やディレクトリ(フォルダ)名を変更する必要があったりはする。

・シンプルなブログとして運用する場合、Wpの公式なテーマもかなりの数があり、デザインも豊富で他の(最新の)テーマへの入れ替えもワンクリックで可能なので、それで十分な人にはhpbのテーマは不要である。

・Wpのダッシュボードでテーマ変更や、メニュー項目の変更を行った場合、それらがhpbに反映されないため、以後hpbは不要になってしまう。

物足りない点、かえって面倒な点

・hpbに慣れる(習得する)のにそれなりに時間がかかりそうなこと。

・CSS編集は、ある程度知識が深まると作業がまどろっこしく、かえって使いにくくなるかもしれない。

・メニュー項目の作成や追加・編集がイマイチ面倒のような気がする。
Wpのダッシュボードで作成するほうが作成もドラッグだけで楽である。
また、hpbではカテゴリをメニューに入れ込めないようだ。

・hpbテンプレートでは大きなデザインの修正や新たな機能の追加が難しい。
その場合、結局はWpのダッシュボードでPHPテンプレートやCSSテンプレートを修正することになり、以後hpbは不要になる。

結局、Wp公式テーマに変更

Twenty Thirteen 、デザインデフォルトはサイドバーなしですっきりしている。
Topは固定ページ表示にして、そこに最新の投稿記事リストを表示させたい。
WordPressでトップページに最新記事5件をリスト表示

➾まず、Wpダッシュボードに(デフォルトのcssテンプレートを触らずに)CSSを編集・追加できる機能が欲しいので、プラグインでJetpackをインストール、有効化、Wordpress.com と連携させる。

➾PHPを編集するために子テーマを作成するほうがいいけれど、とりあえずデフォルトのテンプレートを修正してみる。

最新記事5件をリスト表示させるタグをどのテンプレート入れるのかしばしわからず。
結局、トップページは 固定ページ 表示なので、とりあえず、
サイドメニュー>外観>テーマ編集>固定ページテンプレート (page.php)
を修正。

</div><!– #content –>の直前に以下を追加

<!– #page title list –>
<div>
<h3>最近の投稿</h3>
<ul>
  <?php query_posts(‘posts_per_page=5’); ?>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <li>
  <span>
  <?php the_time(‘Y年n月j日’); ?>
  <?php
    $days=30;
    $today=date(‘U’); $entry=get_the_time(‘U’);
    $diff1=date(‘U’,($today – $entry))/86400;
    if ($days > $diff1) {
  echo ‘<img src=”images/new.gif” alt=”New” />’;
  }
  ?>
  </span>
    <a href=”<?php the_permalink(); ?>”><?php the_title();?></a>
  </li>
  <?php endwhile; endif; ?>
  <?php wp_reset_query(); ?>
</ul>
</div>

その後、タイトル回りを修正
サイドメニュー>外観>CSS編集 に以下を追加

h3 {
    font-size: 32px;
    margin: 33px 0;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #ad2706;
}

h4 {
    font-size: 22px;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #ad2706;
    margin-top: 33px;
    margin-right: 0;
    margin-bottom: 20px;
    padding-left: 10px;
}

.entry-content ul {
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #ad2706;
    padding-bottom: 16px;
    margin-bottom: 40px;
}

.entry-header h1 {
    font-size: 32px !important;
    margin: 33px 0;
    border-bottom-width: 1px;
    border-bottom-style: dashed !important;
    border-bottom-color: #ad2706 !inportant;
}

 

 【その他参考】
・WordPressでフロントページに固定ページと最新投稿を同時に表示

Dalと同じデザインテーマを適用させるには

・テンプレートキング無料Wpテンプレート / 飲食店向きデザインF2
・インストール設定マニュアル

➾ とりあえず、インストールしてテーマで選択できるようにはしてみたけれど、
responsive-layoutじゃないし、レイアウトデザインの統一にこだわらなければ、もっと新しいWpのテーマのほうがいいような気もする。

【課題】
※テーマを変更すると、CSS編集がクリアされてしまうので、
できればDW環境(PC)にDLしておくのが望ましい。
またヘッダー下メインナビゲーションメニューも初期化されてしまうが、設定自体は引き継がれるので、位置の管理からmainnavを選択しなおす(Twentythirteenの場合)。
※やはりPHPテーマの修正は子テーマを作ってそちらでするのが望ましい。(1/14作成・適用済み)
TwentyThirteenの子テーマを作成してカスタマイズをする
子テーマ

Be the first to comment

Leave a Reply

Your email address will not be published.


*