28 Jul 2013, 13:17

WordPressで処理をファイル分割する方法を調べてみました

WordPressで処理をファイル分割する方法を調べてみました。

wordpressのコードをいじっていると、だんだん長くなってきた。

そこで、責務が独立できそうな部分を、別ファイルとして独立させる方法を調べてみた。

get_template_part()をつかう

header.phpやfooter.phpなどの、WordPressで決められた名前のファイルは、専用のinclude関数が用意されている。(get_header(),get_footer()など)

自前で作ったファイル(hogehoge.php)を読みこむには、get_template_part()を利用する。

get_template_part('hogehoge');

例えば、前回の記事で、固定メニューバーをheader.phpから独立させたい場合は,以下のようにすればよい。

  1. header-sticky.phpというファイルを新規作成
  2. 処理をファイルにカット & ペースト
  3. header.phpのカットした場所に以下の行を追加

.

<archives/hp get_template_part('header-sticky'); ?>

ファイル名は、.phpをつけないところがミソ。

07 Jul 2013, 08:20

WordPressのトップページで新着記事をメチャガチャクールに表示する方法

今日はサイトのトップページをメチャガチャクールな男前にカスタマイズしてみました。今日も淡々と作業メモを残します。

改築前に、自分のイメージではこんな風にしたいという図を下に書きます。

では、改造スタート。(^o^)/

Thumbnail for Excerptsを利用する

まずは画像のカスタマイズ。新着記事には、大きいアイキャッチ画像を表示させたい。Thumbnail for Excerptsという便利なプラグインがある。

このプラグインを利用すると、記事の先頭にある画像をアイキャッチ画像と自動で認識できる。

he_expert()関数で、記事抜粋を表示すると、アイキャッチもいっしょに表示してくれる。

しかも、大きさや位置、さらにはアイキャッチ画像が見つからなかった場合のデフォルト画像も指定可能だ。

WP Multibyte Patch

本文抜粋記事を表示する関数、the_excerpt()は、デフォルトで110文字を表示する。この文字数を増やしたい。

WP Multibyte Patchを利用する。これはWordPressにデフォルトでついているプラグインなので、有効化する。

wpmp-config-sample-ja.phpというファイルを編集することで、文字数が変更できる。ファイルの場所は以下。

(WordPresインストールフォルダ)/wp-content/plugins/wp-multibyte-patch/wpmp-config-sample-ja.php

このwpmp-config-sample-ja.phpの内容をコピーして、wpmp-config.phpという新規作成したファイルに貼り付ける。

$wpmp_conf[‘excerpt_mblength’] = 110となっている場所を見つけて、110という数字を表示したい文字数に変更すればOk.

/**
 * 投稿抜粋の最大文字数
 *
 * この設定は the_excerpt() とその関連の抜粋系関数に適用されます。
 * この設定は $wpmp_conf['patch_wp_trim_excerpt'] が false の場合は無効となります。
 */
$wpmp_conf['excerpt_mblength'] = 500;

あとは、新規記事作成時に、抜粋欄にもしっかり文章を書けばOk.

アイコンの作成

続きを読むアイコンを自作しました。Windowsのペイントを使いました。これは説明略。

<p class="link-next"><a href="<archives/hp the_permalink() ?>">
<img src="<archives/hp bloginfo('template_url'); ?>/images/icon/futurismo_next.png" alt="続きを読む" />
</a></p>

カテゴリのカスタマイズ

カテゴリをスタイルシートを利用して、色をつけたりしました。

#main-contents .post-cat a{
    margin-bottom: 0;
    background-color: #FFA500;
    color: #ffffff;
    text-decoration: none;
    overflow: hidden;
    width: 6em;
    height: 1.5em;
    padding: 0.1em 0.3em 0;
    border-bottom: none;
    font-size: 0.858em;
    text-align: center;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

タグのカスタマイズ

タグもカスタマイズします。そもそも、タグがヒョウジサれていなかったので、表示。the_tags() で記事のタグが取得できる。

<archives/hp if (the_tags() != ""): ?> [<span class="post-tag"><archives/hp the_tags(', ') ?></span>] <archives/hp endif; ?></p>

これも、カテコリと同様に、CSSでデコレートする。

まとめ。

とりあえず、こんなところで!まだまだ、もさっとしている。男前にはなれなかったお(´・ω・`)

<archives/hp while (have_posts()) : the_post(); ?>

<div class="post">
<h2 class="post-title"><a href="<archives/hp the_permalink() ?>" title="<archives/hp the_title_attribute(); ?>"><archives/hp the_title(); ?></a></h2>
<p class="post-meta">
    公開日:<archives/hp the_time('Y年n月j日') ;?>  
    <archives/hp if ( function_exists ( 'wpp_get_views' ) ) { echo '<span class="wpp-views">' . wpp_get_views ( get_the_ID() ) . '</span> views'; } ?>
    <archives/hp if (get_the_category() != ""): ?> カテゴリ: <span class="post-cat"><archives/hp the_category(', ') ?></span> <archives/hp endif; ?>
    <archives/hp if (get_the_tags() != ""): ?> タグ: <span class="post-tag"><archives/hp the_tags(' ') ?></span> <archives/hp endif; ?>
</p>
<div class="contents clearfix">

    <div class="article">

    <!--本文抜粋-->
    <archives/hp the_excerpt(); ?>     

    <p class="link-next"><a href="<archives/hp the_permalink() ?>"><img src="<archives/hp bloginfo('template_url'); ?>/images/icon/futurismo_next.png" 
     alt="続きを読む" /></a></p>
    <!--/本文抜粋-->

    </div>
    <!--/article-->

</div>

</div>
<!--/post-->

<archives/hp endwhile;

02 Jan 2013, 03:40

WordPressで記事を取得して記事一覧を作成する方法メモ

WordPressの固定ページとかで、記事一覧を取得して一覧表示することがよくある。

一覧表示するためには、Exec-PHPプラグインを利用するのだけれども、WordPressの編集画面でテキストから[ビジュアル]に変換すると、表示がおかしなことになる。

そのたびごとに、再度コードを書き直しているのだけれども、どんなコードだったかスグ忘れて、メモもどこかに行ってしまうので、このサイトでもメモしておく。

事前準備

WordPressの編集画面でPHPを利用するために、Exec-PHPを入れる。

WordPress 窶コ Exec-PHP ≪ WordPress Plugins

ソースコード例

以下のコードをWordPress編集画面に貼り付け。ここではPHPカテゴリ(カテゴリIDは39)を取得する。カテゴリIDは[ダッシュポード] > [カテゴリー]から調べることができる。

[gist]https://gist.github.com/4450427[/gist]

表示例

-1, ‘cat’=> 39);

$posts = get_posts($args); global $post;?>

17 Sep 2012, 11:54

はてブ新着記事をタグ指定サムネイルつきの抜粋で表示する

はてなブックマークの新着記事をタグ指定のRSSで取得する方法を調べてみた。

まずはURLで取得してみる

以下の形式で取得できる。

http://b.hatena.ne.jp/t/(タグ)?sort=hot&threshold=1&mode=rss

ボイント1: &threshold=(数字)で、収集するはてブの数を指定できる。

ボイント2: (タグ)の名前はパーセントエンコード(URLエンコード)でのUTF-8で書かないと認識されない。

変換したいパスをそのままChromeのURLに貼り付けたら変換された。

このサイトで変換できるみたい。

URLエンコード・デコードフォームツꀀ

具体例

例えば、睡眠のタグがついたはてブで、3フォロー以上はこんな感じだ。

http://b.hatena.ne.jp/t/%E7%9D%A1%E7%9C%A0?sort=hot&threshold=3&mode=rss

取得したRSSを記事に表示する

次は、取得したRSSをWEBページに表示する。

wordpressを使えば、カンタンに表示できた。参考にしたのは、以下のサイト。

複数外部RSSフィードをWordPressで表示 | 簡単ホームページ作成支援-Detaramehp


 

 

set_cache_duration(1800);
    $rss->init(); 
    $maxitems = $rss->get_item_quantity(3); 
    $rss_items = $rss->get_items(0, $maxitems); 
    date_default_timezone_set('Asia/Tokyo');
endif;
?>


No items.</dt>'; else foreach ( $rss_items as $item ) : ?>
get_feed()->get_title(); ?>
get_title(); ?>
(get_date("Y-n-j H:i:s"); ?>)

set_cache_duration(1800);

$rss->init();

$maxitems = $rss->get_item_quantity(3);

$rss_items = $rss->get_items(0, $maxitems);

date_default_timezone_set(‘Asia/Tokyo’);

endif;

?>

<archives/hp if ($maxitems == 0) echo ‘

No items.

‘;

else

foreach ( $rss_items as $item ) : ?>

get_feed()->get_title(); ?>

set_cache_duration(1800); $rss->init(); $maxitems = $rss->get_item_quantity(20); $rss_items = $rss->get_items(0, $maxitems); date_default_timezone_set('Asia/Tokyo'); endif; ?>

No items.</dt>'; else foreach ( $rss_items as $item ) : ?>
get_title(); ?>
get_description()), 0, 100); ?> ・・・ 続きを読む (get_date("Y-n-j H:i:s"); ?>)

<archives/hp include_once(ABSPATH . WPINC . ‘/feed.php’); $rss = fetch_feed(array( ‘http://b.hatena.ne.jp/t/%E7%9D%A1%E7%9C%A0?sort=hot&#038;threshold=3&#038;mode=rss'

)); if (!is_wp_error( $rss ) ) : $rss->set_cache_duration(1800);

$rss->init();

$maxitems = $rss->get_item_quantity(3);

$rss_items = $rss->get_items(0, $maxitems);

date_default_timezone_set(‘Asia/Tokyo’);

endif;

?>

<archives/hp if ($maxitems == 0) echo ‘

No items.

‘;

else

foreach ( $rss_items as $item ) : ?>

get_permalink(); ?>’ target=”_blank”>

get_title(); ?>


 

 

wordpressだとカンタンだぁ。