HOME  /WordPress(初級)
 /Twenty Twelveのウィジェットをカスタマイズする
2020年03月27日

Twenty Twelveのウィジェットをカスタマイズする

 ­メモ

このドキュメントは2016年の初期サイトの時に作成したドキュメントです。

WordPressが全然わからない状態から、とりあえず動く状態まで持っていったやり方を記述しています。

ある程度判っている方は応用編を参照してください。

現在サイトはこの応用編の技術で作成されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

投稿ページには右側にウィジェットエリアがあり、デフォルトで
①サイト内検索、②最近の投稿、③最近のコメント、④アーカイブ、⑤カテゴリ、⑥メタ情報
が表示されています。この表示をカスタマイズしていきます。

1.ウィジェットの構成方針

私のWEBサイトは情報を提供する事が目的なので、TOP(ナビ)に基本メニューを配置し基本操作はここで行う。
ウェジェットエリアはあくまでも補足という位置付けで下記の物に限定して表示する。

①サイト内の検索機能

②カテゴリ

③最近の投稿

2.ウィジェットの編集

1.ダッシュボードの『外観→ウィジェット』を起動する。

2.下記編集画面でウィジェットの構成を編集する。

①使いたい部品を『利用できるウィジェットエリア』から『メインサイドーエリア』にドラック&ドロップする。

②要らない部品はプルダウンメニュを開き削除する。

上記操作で下記の様な構成にします。

3.オプションの指定をする

・カテゴリのオプション

基本はカテゴリ一覧が表示されるが、ドロップダウン表示を選択すると下図の様なカテゴリの選択画面になる。

私はカテゴリの全体像を表示させたいのでこの機能だけOFFにしている。

・最近に投稿のオプション

ここで指定するのは、表示する投稿件数と日付を表示するか否か?です。

実際にドキュメントを表示させると、個々のドキュメントの区切りが不明確な為ゴチャゴチャした表示になります。

そこで投稿日の表示をonにし、投稿日をドキュメント名の前に表示させることにより区切りを明確にします。

表示件数は任意で良いと思います。

3.日付の変更

ダッシュボードの『設定→一般』で日付表示として××年××月××日がデフォルトになっていますが、日本語の日付表示は月や日が1桁で表示される為に桁数が統一で見ません。

そこで日付のフォーマットを2015-08-11に変更します。

これにすると桁数が常に一致する為に、日付をドキュメント名の前に持って行っても全体の表示がうまく並ぶようになります。

尚、ドキュメント本体の更新日付は投稿ページのカスタマイズ方法で××年××月××日にしたので上記変更は関係がありません。

4.CSSのカスタマイズ

準備は整いましたので最後にCSSの設定です。
下記をsty,e.cssの最後に追加してください。

/*******************************************************************/
/* ウィジェットエリアを見やすくカスタマイズする */
/*******************************************************************/
.widget-title{padding:1px 10px;font-size:14px;line-height:24px;font-weight: bold;color: #ffffff;background:#7f7f7f;}
.widget_recent_entries .post-date {margin-left:0;position:absolute;top:-1px;font-size:12px;color:#007f7f;}
.widget-area .widget.widget_recent_entries a{position:relative;top:0;left:70px;width:70%;display:block;font-size:12px;line-height:18px;color: #666666;}
.widget-area .widget.widget_recent_entries li{position:relative;padding-bottom:25px;}

【解説】

.widget-titleは、『カテゴリー』や『最近の投稿』の文字に枠を付けて白抜き文字に変更する指定です。

.widget_recent_entries .post-dateは、投稿日付をmargin-left:0;position:absolute;で一番左に持ってきています。

.widget-area .widget.widget_recent_entries aは、最近の投稿のリンク文字の指定です。

.widget-area .widget.widget_recent_entries liは、リスト表示は相対位置で15pxを開けて表示する指定です。

上記のCSSに変更すると、ウィジェットエリアの表示は下記の様になります。

どうでしょうか。少しは一般のWEBサイトの様に恰好が付いてきたと思います。

 

<ドキュメントガイド>

前のテーマ: Twenty Twelveの投稿ページのカスタマイズ方法

前のテーマ: Twenty Twelveのフッターを編集してCopyright表現にする

 

 

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(初級)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。