「wordpress」カテゴリーアーカイブ

wordpressに関する自作制作物です。他の所に提供したものもあります。色々と作り散らかしているので勝手に改変しちゃって扱い安いように使ってください。プラグイン多めでテーマもたまに作ります。

zenbackを入れてみましたが、実際これはどうなの

結論から言うと、あまりにもニッチな話題を取り上げているとあまり効果がないような気がします。とほほん。

zenbackとは

zenbackはブログの内容を解析し関連記事の表示はもちろん、各種ソーシャルボタン、ソーシャルストリーム、他のブログの記事を表示してくれるサービスです。

個人的には「他のブログ記事を表示してくれる」のがミソです。

自然と外へ向けたリンク、こちらへ向けたリンクが増えるので良いかなと思っております。

ただ。

微妙に的外れな気がしないでもない

どどんとふのダイスを変更する | aoringo works

この記事などは、どどんとふ をちょこっと改造する記事です。一番下をぐぐっと見てみると、

ううん、これはどうなんだ?

これだと、外で見られる私の記事などはどういった物なのかが気になるなあ・・・。

もう少し様子をみて流入してくるアクセスを見てみないといけなさそうですね。

記事横にスクロールでついてくる関連記事一覧を追加してみた

みんな大好きYARPP

記事の横に関連記事一覧を設置してみました。

YARPPというプラグインによる設置で、精度も高く、カスタマイズも簡単なのはとてもありがたいです。

WordPress › Yet Another Related Posts Plugin « WordPress Plugins

プラグインを設置して設定を見ると、

こんな感じで日本語なのも手伝ってとても分かりやすい。カスタマイズをしなくてもリスト表示、サムネイル表示ができてとても助かります。

ただ、やっぱりカスタマイズしたくなるのが人の性分でして、そういう人のためにテンプレートphpを出力してくれる機能まであります。痒いところに手が届きます。

テンプレートは複数種類あり、それを元に自分の好みに変更を加えることが出来ますよ。

テンプレートphpコード

<div id="YARPP-posts" class="side-widget">
  <p class="widget-title">関連記事</p>
  <?php if(have_posts()):
    $options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    //echo esc_url($thumbnails_default); デフォルトサムネイルさん
    //
    ?>
    <ul>
      <?php while(have_posts()) : the_post(); ?>
        <li>
          <p><a href="<?php the_permalink() ?>" rel="bookmark">
              <?php
              if(has_post_thumbnail()) { //サムネイルがあるかどうか探す
                the_post_thumbnail('yarppthumb');
              } else {
                echo '<img width="100" height="100" src="' . esc_url($thumbnails_default) . '" class="attachment-yarppthumb wp-post-image" alt="secondarytile" />';
              }
              ?>
              <?php the_title(); ?></a>
            <br><?php echo get_the_excerpt(); ?></p>
          <!-- (<?php the_score(); ?>)-->
        </li>
      <?php endwhile; ?>
    </ul>
  <?php else: ?>
    <p>No related posts.</p>
  <?php endif; ?>
</div>

これが今回記述したコードです。特に工夫したことは無い素直な感じの物。

サムネイルが設定されてればサムネイルを出力し、されてなかったらデフォルトサムネイルを出力します。

YARPPに設定されているデフォルト画像は

$options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    echo esc_url($thumbnails_default); デフォルトサムネイルさん

で吐き出す事ができます。今後デフォルト画像は差し替えるかもしれないので、こうしていた方が取り回し楽ですよね。

cssはこんな感じです。

/*サイドウィジェット、関連記事*/
#YARPP-posts li{
  margin   :15px 0;
  height:90px;
  overflow:hidden;
}
#YARPP-posts li:after{
  content :".";
  color   :transparent;
  clear   :both;
}

#YARPP-posts img{
  border-radius :5px;
  width         :90px;
  height        :90px;
  float         :left;
  margin-right  :5px;
}
#YARPP-posts img:hover{
  opacity: 0.5;
}
#YARPP-posts li a{
  font-size:12px;
  font-weight:bold;
}

#YARPP-posts li  p{
  font-size  :10px;
  margin     :0;
  padding    :0;
  text-align :left;
}

画像を文字が回り込むような感じですかね。オーバーしそうだったら「overflow:hidden;」で非表示にします。

スクロールでついてくるようにしよう

あとはjqueryを使って、関連記事が追いかけてくるようにします。賛否両論だと思いますが、個人的にはこの仕様は好きです。

jQuery(function ($) {
            var nav = $('#YARPP-posts'), offset = nav.offset();
            $(window).scroll(function () {
              if ($(window).scrollTop() > offset.top - 20) {
                nav.addClass('fixed');
              } else {
                nav.removeClass('fixed');
              }
            });
          });

画面上部に関連記事の要素が来ると、cssクラス「fixed」を追加します。

cssファイルに以下を追加

.fixed{
  position :fixed;
  top      :20px;
}

ウインドウの絶対位置に要素を配置するのが「position :fixed;」ですね。「top :20px;」は表示位置となっています。

あとこの一連のjqueryコードとcssコードはwordpressテーマ「wsc7」に元々収録されています。元々はサイドバー全てがスクロールでついてくるのですけれど、関連記事だけ動くように変更してみました。

本当に痒いところに手が届く良いテーマだと思います。

WSC7

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その9 – 即席ウィジェットを作る

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

プロデューサー! ウィジェットですよウィジェット!! のヮの

ウィジェットはとても大事です。サイドバーを彩ります。しかし自分で作るには少しハードルが高い。テヘペロ。

いちいちオプションとかくっつけたりして、なんか意味不明なコードが沢山あって。いやん、ばかん。

だからテンプレートとして簡単な即席ウィジェットを一つ持っておくと便利ですよ。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その9 – 即席ウィジェットを作る

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その8 – キャッシュをクリアする

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

前回でキャッシュを利用する仕組みに変更しました。一ヶ月間そのキャッシュを使い回します。

問題もあります。このままでは記事を投稿しても一ヶ月ページが変わらないんです。アッチョンブリケ

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その8 – キャッシュをクリアする

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その7 – キャッシュを利用する

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

ワードプレスではあらゆる場所でphp関数が走ります。例えば一週間に一記事投稿するとしても、人が来る度に毎回「記事があるかどうか走査→新着分5件を表示」という動作をします。

勿体なくないですか? 検索ページなどは毎回単語が変わるのでその限りではありませんが、カテゴリ一覧、記事一覧、etc、etc、ちまたでは色々な高速ツール、プラグインを勧める記事がありますが、自身でも高速化の対策をしていく必要があります。

もしやもすると高速化プラグインには今回の記事の内容を行うモノもあるかもしれませんが、今回は自分で用意しますよ。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その7 – キャッシュを利用する

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その6 – サムネイルなんて設定しちゃう

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

今回はサムネイルを表示します。結構面倒くさいのですが。

まずサムネイルをアップロードするときに縮小された画像を生成する必要があります。そうしないと極大画像が小さくなっただけで表示されるのでなまら重たくなってしまいます。 続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その6 – サムネイルなんて設定しちゃう

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その5 – 特定の固定ページを一番目に置く

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

前回のカスタマイズにより記事に抜粋が挿入される形となりました。

次は一ページ目、一番最初に固定ページを置き、アナウンスやら何やらを表示するようにしてみましょう。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その5 – 特定の固定ページを一番目に置く

開発

一人、もしくは複数で制作されたもの。aoringo発案、メイン制作なものは「aoringo」が冠につく。

aoringo CHAT logger
IRC、TRPGチャットのログを綺麗に整形することができるwebツール
Aoringo Elysion Enemy-sheeter
エリュシオンTRPGのエネミーシートを簡単に作成できるwebツール
共同制作:Kurumi’s TRPG archive

提供

依頼を受ける形で制作した制作物。

TRPG.NET セッションマッチングシステム
TRPG.NETが運営している、TRPGをプレイする全ての人たちに向けたTRPGマッチング特化webサービス
cre.jp 検索ページ
NEXTに属する各種体系の総合的な検索webツール
IRC公開LOG | クリエイターズネットワーク
NEXTが運営する一部のIRCチャンネルのチャットログを閲覧することが出来る。CRE.jp、TRPG.net、語り部で運用中

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その5 – 記事本文から自動で抜粋を作る

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

今回は記事本文から抜粋を自動で作る機能を作りたいと思います。

ともあれ、「今の時点で抜粋自動でできてるじゃん?」というのもわかります。わかりますが、「必ずしも冒頭文をもってきもていいわけではない」という事ですよ。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その5 – 記事本文から自動で抜粋を作る

驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その3 – トップページの記事を抜粋表示に変える

一連の記事→wordpressテーマをカスタマイズしよう Archives – aoringo works

さて、さっそくカスタマイズしていきます。 トップページで目につくのは大きな画像領域ですね。あとは記事の場所とサイドバー。

続きを読む 驚くほどシンプルでイカしたwordpressテーマ「wsc7」をカスタマイズしよう – その3 – トップページの記事を抜粋表示に変える