WordPress TwentyThirteenその3

投稿に日付はやっぱりあったほうがよさそうなので、funcitons.phpで削除したところの変わりに以下を追加。日付表示させるだけでいいので。

 the_time(‘Y年m月d日’);

ナビメニューもスタイルシートから少々変更。よく分からずやっているので、調整に時間かかる。子ナビの調整が大変だった。。

単ページのnext/previousナビをタイトルからアイコンに変更。twentythirteen_post_nav()を利用する。functions.phpからtwentythirteen_post_nav()の以下の部分を変更。

<?php previous_post_link( ‘%link’, _x( ‘<img src=”url” width=”84″ height=”18″ style=”background: none; padding:0px; margin:0px; ” alt=”previous” /img> ‘, ‘Previous post link’, ‘twentythirteen’ ) ); ?>
<?php next_post_link( ‘%link’, _x( ‘<img src=”url” width=”84″ height=”18″ style=”background: none; padding:0px; margin:0px; ” alt=”next” /img>’, ‘Next post link’, ‘twentythirteen’ ) ); ?>

WordPress TwelveThirteenその2

フロントページをの表示を最新3投稿は全文表示、残り7投稿は抜粋文にする(以前やった通り)。カテゴリー別ページは開くとヘッダーに余計な表示が出るので、category.phpのclass=archive-header部分を削除。ついでに最新1投稿全文表示、残り9投稿は抜粋表示に変更。

ページャーはデフォルトは大きすぎなので、プラグインのPrime Strategy Page Naviを使用する。日本人が作ったみたいで、Readmeが日本語なのがうれしい。index.phpの

<?php twentythirteen_paging_nav(); ?>

を削除して以下を追加
<?php
if (function_exists(‘page_navi’)) :
page_navi(‘first_label=最新&last_label=最後&edge_type=span&show_adjacent=false&num_position=after’);
endif;
?>

パラメータは好きにカスタマイズできるが、デフォルトは数字と記号だけなので、どちらが最新投稿にリンクしているか、分かりやすくしてみた。スタイルシートにreadmeのサンプルをコピペして終了。

page1

ナビメニュー横の検索アイコンを変更する。スタイルシートの.site-header .search-fieldのbackground-imageからアイコンを変更。ついでにウィジェットの検索枠も以下のような感じを追加して少し変更。

.site-footer .widget_search .search-field {
font-size: small;
background: none;
background-image: url(images/tag/btn050_14.png);
width: 180px;
height: 30px;
border: none;
padding: 0 0 0 8px;
}

RSSアイコンを追加したい場所に以下の感じで追加。今回はナビメニューの横。

<aside>
<?php the_feed_link(‘<img src=”‘ .get_template_directory_uri() . ‘/images/icon/btn037_04.png” width=”16″ height=”16″ alt=”RSS” />’); ?>
</aside>

スタイルシートを以下のように調整した。

.site-header .rss_link {
width: 16px;
height: 16px;
position: absolute;
right: 270px;
top: 8px;
}

WordPress TwentyThirteenに変更

このブログページも少しカスタマイズしようとしていたら、Twentythirteenがでてしまったので、変更ついでにTwentyThirteenにしてみた。footerにメインウィジェット、右サイドに副ウィジェットになっているようだ。サイドバーは固定ではなく、Windowを小さくすると副ウィジェットが投稿の下にくるようだ。今までよりもフレキシブルに表示されるようになった。やったことを忘れないように書き記す。

まずはナビメニュー作成。固定ページの「ホーム」「その他」を作る。ホームは最新投稿ページ、その他は投稿が少ないカテゴリーをまとめて表示させる。設定-表示設定から、フロントページの固定ページを選択、投稿ページの「ホーム」を選択。固定ページ「ホーム」をフロントページとして設定する。外観-メニューからメニューを作成。固定ページとカテゴリーをメニューに追加し、並べ替えて保存。

投稿のコメント欄を削除するため、content.phpの52-66行目のfooterを削除。

日付のパーマリンク表示を削除するため、functions.phpの 359-360行目の

if ( ! has_post_format( ‘link’ ) && ‘post’ == get_post_type() )  twentythirteen_entry_date();

を削除。削除すると全ページで日付パーマリンクが削除されてしまうので、上記部分だけ削除したfunctionを作って分けてもいいかも。

サイドページのカウンターに「今月のアクセス数」を追加するために、counterize.phpに以下を追加。

//Returns amount of hits this month.
function counterize_gethitsthismonth()
{
global $wpdb;
$thismonth = date(“Y-m-1”);
$sql = “SELECT COUNT(1) FROM ” . counterize_logTable() . ” WHERE timestamp >= ‘{$thismonth}'”;
return $wpdb->get_var($sql);
}

関数の定義付けが終わったら、表示させたい場所に

今月のアクセス数:<?php echo counterize_gethitsthismonth(); ?><br />

こんな感じで書き込む。もう一台のPCで表示変更されたか確認しながら変更しているので、その日のアクセス数は、ほとんど自分のアクセス数だけ。。。

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

投稿ページの表示について。

投稿ページの投稿表示数は設定-表示設定ので調整。

今回は10件表示、3件全文表示で残りは抜粋文表示にしてみる。

category.phpに以下のように変更

toukou1

$count++で投稿毎にカウントをして4未満、つまり最新3投稿はcontent-category.php、最新から4投稿目以降はcontent-archive.phpのテンプレートを使用するようにする。次に抜粋分にするためにcontent-archive.phpを変更。

toukou2

今回は170文字としてみた。また、抜粋分になるので、全文表示ページに移動させるためのアイコンも追加。float:rightで右側に配置、background:noneがないとアイコン表示されなかったので追加した。また、ついでに新しい投稿にNEWアイコンを追加できるようにしてみた。もっと他に簡単に出来るやり方もあるかもしれないけど、思い通りに配置や表示が出来なかったので以下のようにしてみた。まずnew-icon.phpを作成。

toukou4

newアイコンを表示させたい日数を$days=7(今回は7日間)で指定する。86400は一日(86400秒)で、現時点から投稿日時を引いた値を86400で割った値が$daysの値以下ならnew表示をする、みたいなことらしい。GIFファイルに色々追加したパラメータは少々配置調整したため。new-icon.phpを作成したら、これをテンプレートに追加する。content-xx.phpに追加。

toukou3

投稿タイトルの前に表示し、投稿タイトルをNEWアイコンの右側になるようになった。追加したのは<?php get_template_part(‘new_icon’);?>の部分。phpファイルを作っておけば、一文追加するだけで好きな場所にアイコン追加できるので、意外と便利・・・だと思う。多分。たったこれだけだが、NEWアイコンが思い通りに表示されるようになるまで結構苦労したorz

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

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

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

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

side3 side4 side5

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

side1

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

side6side7

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

side2

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