WordPress Twenty Twelveを使ってホームページ作成 その5 サイドバー

投稿日: コメントするカテゴリー: WordPress

サイドバーのデザインについて。

ウィジェットをサイドバーに追加してみると、余りに味気ない。デフォルトのウィジェットなので、大きな変更はできないし、プラグインを探すのも面倒くさいので、少しスタイルシートを変更してみる。

まずウィジェットの「固定ページ」を追加。表示させたらそのページのソースを表示させ、該当箇所のclass等を確認する。今回の場合は、サイドバー全体のclassがwidget-area、ウィジェット「固定ページ」のclassがwidget_pagesで、その子項目のclassがchildrenだったので、以下のような感じでスタイルシートに追加した。

side3 side4 side5

width,margin,padding等で調整をして以下のように

side1

同様にウィジェットの「最近の投稿」も追加して、スタイルシートに以下を追加。

side6side7

overflowはタイトルが長文になったとき、タイトル全文が表示されないことよりも、2行3行となるのが嫌だったので追加。post dateの位置も調整して以下。

side2

次は投稿ページについて。

WordPress Twenty Twelveを使ってホームページ作成 その4 子ページなど

投稿日: コメントするカテゴリー: WordPress

固定ページなどについて。固定ページのテンプレートはフロント(front-page.php)、デフォルト(page.php)、サイドバーなし(full-width.php)と3種類用意されているが、固定ページが増えると、それぞれのカスタマイズが複雑になりそうなので、あらかじめ子ページを作って分けることにする。

page.phpなどをコピーして、page-xx.phpファイルを作成。作成したphpファイルの3行目くらいに以下を追加すると、固定ページ作成のテンプレートから選択できるようになる。テンプレートを分けておけば、サイドバーの有無、記事の選別などカスタマイズが分かり易くなる。

* Template Name: Page xx Template //テンプレート名

固定ページが決まったら、次にcontentを割り当てる。page-xx.phpにはcontent-xx.phpのような感じでファイル作成しておき、

<?php get_template_part( ‘content’, get_post_format() ); ?>を

<?php get_template_part( ‘content’, ‘xx’ ); ?>のように変更すれば、page-xxからcontent-xxを呼び出せるようになる。

投稿ページはcategory.php、アーカイブはarchive.php、単一投稿ページはsingle.php、検索ページはsearch.phpなどと割り当てられているので、必要に応じてcontentも作成しておく。

次はサイドバーのカスタマイズについて。

WordPress Twenty Twelveを使ってホームページ作成 その3

投稿日: コメントするカテゴリー: WordPress

ナビゲーションメニューがまだ寂しいので、タブを画像に変更する。前回はbackgroundで色変更しただけだったので、

background-image:url(‘画像url’);     /*背景画像設定 */

でタグ、ナビ背景を変更してみた。

130205_ナビ1

背景に30x30pxの画像を使用したが、デフォルト設定でタイル状にリピート貼り付けしてくれるようだ。最初知らなくて、960x30pxを自作しようとしてたorz

 

WordPress Twenty Twelveを使ってホームページ作成 その2

投稿日: コメントするカテゴリー: WordPress

ナビゲーションが寂しいので、少しカスタマイズする。style.cssより、

130203_ナビ1

borderを変更し、background追加、text-alineをcenterにしてナビが真ん中になるようにした。

130203_ナビ2

paddingでナビの幅を持たせたが、widgeで固定したほうが並びは綺麗かも。

130203_ナビ3

以上の変更で以下のようになった。

130203_ナビ4

とりあえず色を付けただけなので、その内もう少しデザインを変えてみようと思う。

 

 

 

WordPress Twenty Twelveを使ってホームページ作成 その1

投稿日: コメントするカテゴリー: WordPress

ホームページ作成するため、WordpressのデフォルトにあるTwentyTwelveを使ってカスタマイズしていく。初心者なので、のんびりと。

ブログとホームページを別々の用途で使い分けたかったので、ホームページはsample.com、ブログはexsample.sample.comとして作成することに。もともとsample.comでブログを書いていたので、データベースをもう1個作り、WPをインストール後、ブログ記事をphpMyAdminを利用してデータをexsample.sample.comに移動。ホームページ用sample.comに残ったブログ記事はすべて削除。その他、多少カスタマイズしていたので、分かる範囲で対象ファイルをコピペ。で、だいたいブログの移動は終わり。

テーマをTwentyTwelveに変更して、まずはパーマリンクの設定から。今回は、特に理由はないが、「年月日」「カテゴリー」「ID」にする。

/%year%%monthnum%%day%/%category%/%post_id%

htaccessファイルを作成するよう支持が出るので、作成して、サーバーにアップ。特にWPアドレスとサイトアドレスを変更した場合はhtaccessファイルの置き場所に注意。ちゃんとWordpressのindex.phpのあるフォルダにアップすること。よく分かってなかったので、意外と苦労したozr

次に固定ページを作成し、必要項目を作る。ナビゲーションに並べたいので、テンプレートはHomeはフロントテンプレートを、それ以外の固定ページはデフォルトを選択。順序も指定すれば、若い番号から順番に並んでくれる。カテゴリで投稿ページもひとつ作り、外観‐メニューでナビゲーション設定する。

ナビゲーションがヘッダー画像の上にあり、馴染めなかったので、画像の下へ移動。header.phpの<nav id= ~ </nav>の行を以下の場所に移動

wp1

これでナビがヘッダー画像の下に移動した。