ホウゲツサイト プラグイン

FeedWordPress
登録したサイトの更新情報を一括管理するシステム
http://www.versath.org/archives/2269

W3 Total Cache
キャッシュのプラグイン
下記は、えらい目にあったとのこと。
http://provaiciao.jp/mt-wp-ecc/w3-total-cache-error/

PubSubHubbub
今回はGoogleへのインデックス速度をアップしてくれるプラグイン
http://hisato-net.com/pubsubhubbub-180

Duplicator
WordPressを複製して簡単にサーバー移転ができるプラグイン
http://netaone.com/wp/duplicator/

AddQuicktag

All In One SEO Pack

AVH Extended Categories Widgets

Category Order and Taxonomy Terms Order

Contact Form 7

Contact Form 7 add confirm

Resize At Upload Plus

背景指定

下記の表は左・中央・右/上・中央・下方向の繰り返し設定のタグ一覧です。

垂直方向の位置 タグ
左側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : left;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : center;
右側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-y;
background-position : right;
水平方向の位置 タグ
上側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : top;
中央に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : center;
下側に繰り返す background-image : url(画像のパス);
background-repeat : repeat-x;
background-position : bottom;

画像の配置 タグ
左・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left top;
もしくは
background-position: 0 0;

左・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left center;
もしくは
background-position: 0 50%;

左・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: left bottom;
もしくは
background-position: 0 100%;

中央・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center top;
もしくは
background-position: 50% 0;

中央・中央 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center center;
もしくは
background-position: 50% 50%;

中央・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: center bottom;
もしくは
background-position: 50% 100%;

右・上 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right top;
もしくは
background-position: 100% 0;

右・中央 background-image: url(画像のパス);
background-repea : no-repeat;
background-position: right center;
もしくは
background-position: 100% 50%;

右・下 background-image: url(画像のパス);
background-repeat: no-repeat;
background-position: right bottom;
もしくは
background-position: 100% 100%;

キーワードによる指定の他に [px] [%] などもあり、こちらの方がより細かな設定が出来ます

スクロールさせない
body{
background-image: url(sample.gif);
background-repeat: no-repeat;
background-position: right top; /* background-position: 100% 0; */
background-attachment: fixed;
}

CSSまとめ

[CSS]dl要素を美しくデザインするスタイルシートのまとめ
http://coliss.com/articles/build-websites/operation/css/showcase-css-definition-list-styles.html

[CSS]シンプルなHTMLで、ギザギザのかわいいボーダーをつくる
http://coliss.com/articles/build-websites/operation/css/css-jagged-border-by-somestuffer.html

[CSS]画像を使わずに、スタイルシートでぎざぎざの線をかくテクニック
http://chick.tikidesign.jp/wp-admin/post.php?post=117&action=edit&message=6

[CSS]紙、ステッチ、リボンなどのかわいいエフェクトを簡単に実装できるコード
http://coliss.com/articles/build-websites/operation/css/sweet-css-framework-beemuse.html

[CSS]多階層のリスト要素をツリー状にデザインするスタイルシートのテクニック
http://coliss.com/articles/build-websites/operation/css/css-parent-child-vertical-list-menu.html

[CSS]シャドウとグラデーションを巧みに使ったかわいらしいテキストエフェクト
http://coliss.com/articles/build-websites/operation/css/css-milky-effect-by-juanbrujo.html

[CSS]スマフォでも印刷してもレイアウトが紙のように美しいフォームを実装できる -Grid forms
http://coliss.com/articles/build-websites/operation/css/framework-grid-forms.html

[CSS]テキストの天地に美しいグラデーションのボーダーと背景を適用するスタイルシート
http://coliss.com/articles/build-websites/operation/css/css3-gradient-borders-by-murphyrandle.html

[CSS]h1一つだけでこんなにかわいいレトロ風リボンが実装できるスタイルシート
http://coliss.com/articles/build-websites/operation/css/css-single-element-pure-css3-double-fold-ribbon.html

CSSをもっと使いこなしたい人用のいろいろなテクニックが見られるサイトのまとめ
http://coliss.com/articles/build-websites/operation/css/more-css-techniques.html

すぐに使えてデザインも素敵、CSS3で実装されたUIエレメントのオープンソースのまとめ -CSS3 Code Snippets
http://coliss.com/articles/build-websites/operation/css/open-source-ui-components-coded-with-html-and-css-and-sass.html

CSS3を使った実用的なスタイルシートのテクニックのまとめ
http://coliss.com/articles/build-websites/operation/css/awesome-css-techniques-the-first-half-of-2012.html

[CSS]パーセントで指定された正確なサイズが不明な要素を天地左右の中央に配置するスタイルシートのテクニック
http://coliss.com/articles/build-websites/operation/css/centering-percentage-widthheight-elements-by-css-tricks.html

日付に関する表示いろいろ

記事に「最終更新日」を表示する方法


<p>
[記事公開日]<?php the_time('Y/m/d'); ?><br>
<?php if (get_the_modified_date('Y/n/j') != get_the_time('Y/n/j')) : ?>
[最終更新日]<?php the_modified_date('Y/m/d') ?>
<?php endif; ?>
</p>

最終更新日のみ表示する場合

[最終更新日]<?php the_modified_date('Y/m/d') ?>

WordPressで指定日時によって内容を表示するショートコード
http://gatespace.jp/2012/05/28/date-short-code/

公開済の記事を指定日時で予約更新する
http://wpxtreme.jp/公開済の記事を指定日時で予約更新する

pdf

ホームページ上でPDF形式のファイルを表示させたい時、

リンクをはる場合は

<a href="acrobat/acrobat3J.pdf">アクロバット3JPDFファイル</A>

埋め込みたい場合は

<embed src="acrobat3J.pdf" width:300; height:300;>

PDF Viewerプラグインがインストールされている場合、
これでホームページ上に埋め込まれたPDF形式の書類を見ることが出きます。

Googleドキュメントのビューア機能を利用したもの

<p>
<iframe style="WIDTH: 420px; HEIGHT: 583px" src="http://docs.google.com/gview?url=http://www.cals-ed.go.jp/calsec/rule/const4r.pdf&amp;embedded=true" frameborder="0"></iframe>
</p>

書体指定(Font)

明朝
font-family:”ヒラギノ明朝 Pro W6″,”Hiragino Mincho Pro”,”HGS明朝E”,”MS P明朝”,”MS PMincho”,”MS Mincho”,serif;

ゴシック
font: 12px/1.5 “ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”メイリオ”,”Meiryo”,arial,Osaka,”MS Pゴシック”,”MS PGothic”,Sans-Serif;

ログイン画面のロゴ・CSS・リンク先を変更したい

[参考]http://codex.wordpress.org/Customizing_the_Login_Form

// ログイン画面ロゴ変更
function my_custom_login_logo() {
echo ‘

‘;
}
add_action(‘login_head’, ‘my_custom_login_logo’);

//ログインのロゴのリンク先変更
function custom_login_logo_link() {
return get_bloginfo( ‘home’ ).’/';
}
add_filter( ‘login_headerurl’, ‘custom_login_logo_link’ );

CSSを変更したい場合

.login h1 a {
background-image: url(‘../images/wordpress-logo.png?ver=20120216′);
background-size: 274px 63px;
background-position: top center;
background-repeat: no-repeat;
width: 326px;
height: 67px;
text-indent: -9999px;
overflow: hidden;
padding-bottom: 15px;
display: block;
}

必要に応じてfunction.phpから上書きが可能です。

画像の回り込み解除 CSS

WordPress の標準テーマである default, twentyten には
回り込みに関するスタイルが書いてあります。

/* 画像の回り込みとか */
.aligncenter {
    display: block;
    clear: both;
    margin: 0.25em auto 1.5em;
    }
.alignleft {
    float: left;
    clear: both;
    margin: 0.25em 1.5em 1.5em 0;
    }
.alignright {
    float: right;
    clear: both;
    margin: 0.25em 0 1.5em 1.5em;
    }
h2, hr {
    clear: both;
    }

配置:左が連続すると、回り込みがおかしくなってしまうので、
画像タグの後に

<div style="clear:both;"></div>

を挟むか、見出しか水平線を書けば回り込みを解除できます。

プラグイン 試したいもの

Post Templates
記事のひな形を作れるプラグイン、ECサイトの商品紹介ページなどに向いている?

Duplicate Post
記事を複製できる
[参考]http://blog.tk-works.info/duplicate-post-62.html
[参考]http://design-plus1.com/tcd-w/2013/02/duplicate_post.html

PS Disable Auto Formatting
とにかく、いっぱい改行入れたいプラグイン

WP-Cufon
フォントを画像と置き換える
[参考]http://mbdb.jp/hacks/plugin_wpcufon.html

Infinite-Scroll
記事一覧を無限スクロールに変更する

Exec-PHP
記事内でPHPを使えるようにする。が、一度入れると2度と外せない。
[参考]http://blog.quusookagaku.com/wordpress/9059/

WordPress Download Monitor
ダウンロードファイルを管理する
[参考]http://www.lasical.com/2011/01/18/614/