CMS（WordPress）などの技術ブログ

クライアントワークの場合に便利なプラグインがありました。

公開していない記事を他人に見せる場合、

「投稿を下書きしてログインして見てもらう」
「投稿にパスワード保護をかけて見てもらう」
「画面ショットを見てもらう」

などが主流だったのでは無いかと思います。

このプラグインは「投稿を下書きしてプレビュー用のテンポラリーURLにアクセスして見てもらう」事ができます。
特にポータルサイトなど、サイト運営者がさらにそのクライアントに記事の内容を確認してもらう場合に便利かもしれませんね。

さて導入方法と使い方です。

ダウンロード

Public Post Preview

インストール方法

ダウンロードしたファイルをプラグインフォルダに格納し、管理画面からプラグインを有効にするだけ。

使い方

1) 投稿を普通に書いて下書きで保存します。

2) 投稿編集画面の下の方に「Public Post Preview」のボックスがあるので、
　　「Enable public preview」にチェックを入れる


3) このようにURLが発行されるので、これを見てもらいたい人に教えてあげればOK。
　　WordPressにログインしなくても投稿内容を確認する事ができます。

エディタとか使う方はTabキーでインデントをガンガンつけている事と思います。
私も普通のメモもエディタで書く時はよくTabキーを使います。

そんな状況なので、Webツールや入力フォームで戸惑う事があります。
入力して複数行を一気にタブでインデントしようとして削除してしまうのです。
こういう人、結構いると思います。
テキストエリアにタブが入力できると、色々便利です。
（逆に使いづらいって場合もありますが、、）

JavaScriptを使ってタブキーを入力するとタブを入力するショートカットキーを作っても良いのですが、
中途半端にショートカットを入れるとそのページでは全てタブが使えなくなって不便です。
地道に作っても良いんですが、結構気が効いたプラグインがあったのでご紹介。

Webページのテキストエリアでタブが入力できるプラグイン

tabIndent.js

デモ画面です。ダウンロードのセットに入ってます。
こんな風に複数行を選択してタブが挿入できますよ。

通常サイトには余り必要無いですが、Developper向けのツール等を作る場合は便利そうです。
近々弊社のサイトにも導入してみます。

投稿にはカテゴリーを複数設定できます。
投稿一覧や投稿画面において、投稿が属するカテゴリーをリンクとして表示させておきたい場面は結構あるかと思います。
特にブログやコラムなんかだとこういう事多いですよね。
これを関数化しておくと結構便利、という話です。

投稿が属するカテゴリーはget_the_categoryを使えば取得できます。
このように。

$my_cats = get_the_category($post->post_ID);

ただこのままだと配列の状態で取得されるので、
通常はリンクなどのHTMLに加工して出力するかと思います。

カテゴリーIDが分かれば、
カテゴリーページへのリンクはget_category_linkを使って取得できます。

foreach ($my_cats as $my_cat) {
    echo get_category_link($my_cat->cat_ID);
}

またどこかで使いそうな感じの処理ですね。
こういった処理は関数化しておくと便利です。
カンマ区切りでカテゴリーリンクを表示する関数を作ってみました。

function get_post_category_link($post_id) {
 
    //カテゴリーリスト
    $my_cats = get_the_category($post_id);
     
    if ($my_cats) {
     
        $cats_cnt = 0;
        foreach ($my_cats as $my_cat) {
             
            if ($cats_cnt > 0) {
                echo ', ';
            }
 
            $cat_link = get_category_link($my_cat->cat_ID);
 
            echo '<a href="' . $cat_link . '">' . $my_cat->name .'</a>';
             
            $cats_cnt++;
        }
    }
 
}

こんな感じで使います。
引数「$post_id」には投稿IDを与えます。

<?php
	get_post_category_link($post_id);
?>

「WP No Category Base」はカテゴリーページのURL「Category」を消すことができるので、
WordPressをカスタマイズする際には必須のようなプラグインです。

パーマリンク設定を「/%category%/%post_id%」のように設定すると、
クエリ文字列を使用したURLから解放され、かつ「Category」というURLも消す事ができます。

こうした状況の中、ページネーション（改頁）を実現できるプラグイン「WP-PageNavi」を使用すると、
2ページ以降（/page/2 といったようなURL）が404になってしまうようです。
以前はそんな事なかったので、恐らく最近のWPバージョンで発生する模様。

色々解決策はあるようですが、
シンプルな解決策を備忘録的にエントリーしておきます。

「WP No Category Base」を使用している場合に「WP-PageNavi」が動作しない場合の解決策

プラグイン「WP No Category Base」を無効にする
まずこのプラグインを無効化（というか使うのをやめます）。

プラグイン「Top Level Categories」を使用する
「WP No Category Base」とほぼ同じ事ができるプラグインです。
ダウンロード：Top Level Categories
ここまでだとまだページネーションは動かないと思いますので次のステップ。

プラグイン「Top Level Categories Fix」を使用する
これを入れるとページネーションが動作するようになります。
ダウンロード：Top Level Categories Fix

画像をアップしてWebサイトに表示する場合、
普通はきちんと目的のサイズに加工してからアップすると思います。
特に同じ画像が並ぶような使い方の場合は揃ってないと変ですからね。

サイズがちょっと合わない画像が混ざってたり、
いちいち加工する暇がない場合もあるでしょう。

そんな時CSS側（もしくはHTML側）で下記のように切り抜けるのが定番です。

(1) 画像のwidthやheightを指定して拡大・縮小する。

<img src="" alt="" style="width: 200px; height: 100px;" />

縦横比が変わると困る場合がある場合（ほとんどそうだと思いますが）は次の方法。

(2) 画像の縦横比を維持したい場合は、widthかheightをどちらか指定して拡大・縮小する。

<img src="" alt="" style="width: 200px;" />

でも、縦横比は維持したいけど、画像の枠の大きさが決まってる場合はどうしたら良いでしょうか。
そこで次の方法。

(3) CSSで画像を切り抜く

ある程度まで縦横比を維持したまま縮小して、
はみ出た部分は切ってしまうという事です。
下記のように実装します。
これで幅200px、縦100pxをはみ出た部分はカットされます。

<div class="photo">
	<img src="" alt="" />
</div>

div.photo {
	width: 200px;
	position: relative;
}
div.photo img {
	width: 200px;
	position: absolute;
	clip: rect(0px 200px 100px 0px);
}

きちんとWebサイトを運営する場合は、画像を加工するのが当然かつ唯一の方法ですが、
そのへんは緩くて構わないよという場合、上記の方法で切り抜け可能です。