コピペでつくるwordpressサイト テンプレートタグ

wordpresstag2

このブログはwordpressで運営しているのですが、どうもテンプレートタグがいつまでも覚えられません。

あいかわらず、過去データを引っ張り出しコピペで作っているので効率が悪いです。。

書籍もたくさん発行されていたり、WordPress Codexなどのwikiもあるのですが、 本は買ったことはなく、wikiの方は意外ととっつきずらかったりして苦戦しています。

そこで、いつも救世主となっているのが各クリエイターさんのブログです。

特に下記の記事にはお世話になりました。

WordPressテンプレートタグ集|初心者即実践&仕事で使えるコピペ用 https://webdesignerwork.jp/wordpress/wordpress_tag/

今回は、さらによく使うテンプレートタグをコピペで使えるようにさらに充実させたいと思います。
(ネットがなくなったらなにもできなそう・・・)

ループ作成基本セット

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php if(has_post_thumbnail()) { echo the_post_thumbnail(); } ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>
<?php endwhile; ?>
<?php else : ?>
<?php endif; ?>

がないとエラーになります。最初はそれすら知りませんでした。

パーマリンクとタイトル

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?></a>

ページネーション

    <?php global $wp_rewrite;
    $paginate_base = get_pagenum_link(1);
    if(strpos($paginate_base, '?') || ! $wp_rewrite->using_permalinks()){
        $paginate_format = '';
        $paginate_base = add_query_arg('paged','%#%');
    }
    else{
        $paginate_format = (substr($paginate_base,-1,1) == '/' ? '' : '/') .
        user_trailingslashit('page/%#%/','paged');;
        $paginate_base .= '%_%';
    }
    echo paginate_links(array(
        'base' => $paginate_base,
        'format' => $paginate_format,
        'total' => $wp_query->max_num_pages,
        'mid_size' => 4,
        'current' => ($paged ? $paged : 1),
        'prev_text' => '« 前へ',
        'next_text' => '次へ »',
    )); ?>

個別テンプレート作成

<?php
/*
Template Name:***
*/ ?>

これくらいですらおぼえられない

サイドバーで使えるセット

カテゴリー(li表示)

<h3>カテゴリー</h3>
<ul>
<?php wp_list_categories('show_count=1&title_li='); ?>
</ul>

<h3>最新の投稿</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=20');?>
</ul>

最初の文字だけ表示

<?php echo mb_substr(get_the_excerpt(),0, 100);?>...

サムネイルの大きさ指定

<?php the_post_thumbnail(array(300,200)); ?>

進む/戻る

<?php previous_posts_link('< Previous Page'); ?>
<?php next_posts_link('Next Page >'); ?>

西暦取得

<?php echo date('Y'); ?>

トップページなどでよくあるNEW!!

<ul>
<?php $posts = get_posts('numberposts=6');
foreach($posts as $post): ?>
<li class="news">
<?php
$days=7;
$today=date('U'); $entry=get_the_time('U');
$diff1=date('U',($today - $entry))/86400;
if ($days > $diff1) {
echo '<img src="画像" alt="New" />';
}
?>
<?php echo date("Y.m.d.", strtotime($post->post_date)); ?>
<a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>">
<?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

投稿数とカテゴリー指定

<?php if (have_posts()) : ?>
<?php query_posts('showposts=1&cat=8'); while(have_posts()) : the_post(); ?>

【まとめ】動物系名前のまとめブログを検索してみた【速報】

まとめブログをつくってみようと思い、某速報をみていまして、タイトルはかわいい動物系でいこう!

と決めてまずは検索してみました。

パンダ速報

matome-panda
http://pandalover4533.blog.fc2.com/

第一候補だったパンダ速報がすでにあり、、ゴロがいいかなと

きりん速報

matome-kirin
http://meanwhile.doorblog.jp/

残念。すでに実在していました。
これはもう調べてみるしかないと思い続けて検索してみました。

みじかな動物系速報

ねこ速報

matome-neko
http://occhandesuga.blog.fc2.com/

その名もストレートに「ねこ速報」。ねこ画像はネットでは人気でメジャーな存在ですね。ですがこのブログの更新はもう止まっているようです。

ワンワン速報

matome-dog
http://chomp.blog.jp/

犬の写真があると思いきやヘッダーもありません。まとめサイトではなくテキストサイトっぽいです。エロ系の広告あり。

犬速報はさすがに普通すぎるのかありませんでした。

にわとり速報

matome-niwa
http://blog.livedoor.jp/niwatorisokuho/

ディスクリプションと中段の二か所に「ニワトリってかわいいよね 抱きしめたいなあ!にわとり!」のテキストが。
にわとりってイラストなどのイメージではかわいいかもしれないですが、実物を見るとそんなにかわいくない気もします^^;

ラビット速報

matome-rabbit
http://rabitsokuhou.2chblog.jp/

まどかマギカのイラストが使われていますが、芸能ネタ記事が多いようです。

ひつじ速報

matome-hitsuji

※個人ブログのようなのでリンク自重
ひつじ速報もありました。大きなひつじテンプレートの青空の左上にちょこんとかかれた「プリキュアは至高」の文字がツボですw

サファリ系速報

ゴリラ速報

matome-gorilla
http://blog.livedoor.jp/news4gorilla/

ゴリラ速報もありました。背景色もゴリラを意識してそうですね。

チーター速報

matome-chita
http://cheetahsokuho.blog.jp/

livedoorテンプレート型のまとめブログサイト。左上にチーターがいますが、なんと背景にもチーターがいます。

インパラ速報

matome-inpara
※お店のブログなのでリンク自重

動物のインパラではなく車のインパラ^^;

無いと思ったらあった動物系速報

V系たぬき速報

matome-tanuki
http://blog.livedoor.jp/bangya_/

あまりかわいい動物ではなく、割りと地味目な動物たぬき。ないだろうなと思ったらなんとありました!
ブログの内容はなぜかヴィジュアル系専門のようです。

サイ速報

matome-sai
http://cysoku.com/

これも動物のサイではなく、、最速のサイで自動車系ブログです^^;

総合

どうぶつ速報

matome-doubutu
http://blog.livedoor.jp/petmatomesite/

可愛い動物系はほとんどすでに実在しているようなのでざっくりと動物で!と検索すると、ありました。これも。

アニマル速報

matome-animaru
http://blog.livedoor.jp/ani_soku/

ライブドアブログですが、まとめテンプレートを使っていないまとめブログっぽくないサイト。右上に動物感がありますね。

ハムスター速報

本家

matome-humstar
http://hamusoku.com/

ご存じ(?)大手まとめサイト。

カピバラ速報

matome-kabi
http://capybara.publog.jp/

ハムスターの親分的な名前のまとめサイト。livedoorblogまとめテンプレートなとこも意識してますね。

ロブスター速報

matome-robu
http://blog.livedoor.jp/notaffiliate/

ハム速に対抗して有志によってつくられたサイトですが、更新停止ということでハム速に屈してしまったのでしょうか?

ジャンガリアン速報

matome-jan

かなりの情報量のサイト。手が込んでます。

今回は動物系の名前のブログを調べてみました。
実験のためにまとめブログもやってみたいと思っているので、いくら稼げるのか、いくらアクセスがあるのかもいつかはブログのネタにできたらなぁと思います^^;
身近な動物で「やぎ」はでてこなかったのですが、あんまりかわいくないしなぁ・・・。

最後に。最近すきですキュウソネコカミ(バンド)


スレタイだけでおもろいね!

メールフォームにフォーカスすると吹き出しっぽいものがでるプログラム

balloon

EFO(Entry Form Optimization) すなわちメールフォーム最適化。

MFOだったかEMOだったか覚えられないことがたびたびあります・・。

説明はLIG先生にゆずり・・・

入力してくれる時に吹き出しがでると楽しいですよね!!(?) 真面目なフォームだけじゃつまらない!

ということで吹き出しがでるうざいメールフォームを制作してみました。

吹き出しっぽいものがでるメールフォーム サンプル

Jquery
$(document).ready(function(){
    $(".formcheck div").hide();
  });

$(function() {
	$("#a").focus(function(){
	if($("#a").val() == ""){
         $("#fa").fadeIn("slow");
				}
    })
    .blur(function(){
         $("#fa").hide();
    })
  });
~~以下くりかえし~~
CSS
.formcheck input{
	display:block;
	margin-bottom:10px;
}

.formcheck label{
	padding: 5px;
	border-radius:5px;
	background-color: #F99;
	font-size: 11px;
	margin:0px;
}

.formcheck div{position: absolute;}
HTML
<div><form class="formcheck"><input id="a" type="text" value="" /> 
<div id="fa"><label>入力してね</label></div> 
</form></div>