ワードプレス | WordPressなら最高！

この記事のタイトル上部にある「Print・PDF」ボタンを設置するプラグインです。印刷画面とpdfファイルの生成以外にも、ダイレクトにメール送信できる機能もついています。印刷画面は、フォントサイズを9pt～15ptまで任意に変更できる上、画像の非表示や不要なテキストを削除する機能もあって、とても便利です。

「Print・PDF」ボタンをクリックすると下記の画面となります。
Print Friendly and PDF
ここで、目的の画面作り。不要なテキストを削除したり、画像を非表示にしたり、フォントサイズを自分仕様にしたり…。

PDFファイルにしてダウンロードする場合
Print Friendly and PDF
ボタンをクリックすると、数秒後（pdfファイルに変換している時間）ダウンロードが開始されます。

メールで送信する場合
Print Friendly and PDF

ペーパレスの時代とは言え、マニュアルやレシピなど印刷機能が役立つ場合もあります。設定はすごく簡単なので、とりあえず設置しておく、というのはどうでしょう。

Print Friendly and PDFの設定

左サイドバー「設定」»「Print Friendly and PDF」で好みのボタンやテキストカラーを選びましょう。

※任意の場所に「Print・PDF」ボタンを表示したい場合は…
「Button Placement」の「Add PrintFriendly To」で、「Manual」を選び、下記のコードをphpファイルの目的の場所にコピペする。

<?php if(function_exists('pf_show_link')){echo pf_show_link();} ?>

WordPressに印刷＋pdf＋e-mailの機能を追加「Print Friendly and PDF」プラグイン is a post from: WordPress なら最高！

お問い合せフォームの定番プラグイン「Contact Form 7」の小技をまとめてみました。サイトのイメージや用途に合わせて、フォームもそれなりに工夫したいですものね。基本的な使い方の説明は省略しました。

チェックボックス　フォーム画面に1項目ずつ改行して表示

チェック項目には wpcf7-list-item というクラスが振られているので、スタイルシートで下記を追加することで改行されます。

.wpcf7-list-item { display: block; }

その他の装飾も紹介されています
　Custom layout for checkboxes and radio buttons (Contact Form 7 tips)

チェックボックス　受信メール本文でも１項目ずつ改行表示

テーマフォルダ内の functions.php に下記を追記すると、メール本文内も改行表示となります。

add_filter( 'wpcf7_mail_tag_replaced', 'my_mail_tag_replaced', 10, 2 );
function my_mail_tag_replaced( $replaced, $submitted ) {
  if ( is_array( $submitted ) )
    $replaced = join( "\n", $submitted );
  return $replaced;
}

参考にしたサイト
　ContactForm7 メッセージのチェックボックス改行について

テンプレート集

ディフォルトのコンタクトフォーム
一般の会社用のフォーム
商品についてのフォーム
資料請求用のフォーム
アンケート用のフォーム
予約フォーム
メールマガジン用のフォーム
採用情報用のフォーム
説明会用のコンタクトフォームソース

　
詳しくはこちら…
Contact Form7（問合せフォーム）のカスタムテンプレート集

スタイルシートでどのようにでも……

フォームを成形するエリアは、スタイルシートが使えるので見た目をどのようにでもできます。例えば、(必須)などを赤字で小振りにしたいなら、

<span class="reds">（必須）</span>　← 任意のクラス名で括り

.reds{color:#cc0000;font-size:11px;}　← スタイル記述

Contact Form 7 小技まとめ is a post from: WordPress なら最高！

WordPressの編集は常にテキスト（HTML）画面なので、ビジュアル画面しか使わない友人から相談を受け、初めて気づくことが多々あります。今回は、「テキストが写真の横にくっついて、写真の下にもっていけない！」と。HTML編集画面だと、あらかじめcssで設定してあるclearfixのコードを読み出せば一件落着だけれど、ビジュアル編集画面では使えないし。ということで……

TinyMCE Clear の導入

調べた中で、もっとも簡単＆解りやすそうなのが、「TinyMCE Clear」。
フロートをクリア有効化すればすぐ使えるし、クリアされた部分の上に、区切りの波線と「← clear left」が入るので、初心者にはとても解りやすいと思います。2年以上アップデートされていないのが気にはなりますが、現在のバージョン 3.5.1 でも問題なく使えます。

1．プラグイン → 新規追加 → 「TinyMCE Clear」を検索
2．インストール → 有効化
3．追い出したい部分にカーソルを置き、TinyMCE Clear ボタンをクリック。

TinyMCE Clear の詳細　

プラグインを使わないやり方

「WordPressのビジュアルエディターにプラグインなしでクライアントさん向けボタンを追加」の中で紹介されている「ビジュアルリッチエディターに、フロートをクリアするボタンを追加」が良い感じです。

画像のパスを自分の環境に合わせて書き替えたり、functions.php ファイルにコードをコピペする必要がありますが、どちらも難しい作業ではありません。プラグインを多用するとサイトが重くなったり、バージョンアップを迫られたり面倒な事がありますので、こちらもかなり有力と思います。

WordPressのビジュアル編集画面で回り込みを解除する方法 is a post from: WordPress なら最高！

友人に頼まれてちょっと可愛いホームページを作りました。サイトテーマは、小さな子どものお預かり＆音楽教室。サイトへの希望は「可愛く・すっきり・基調色は白とロゴのピンク・3つの主要コンテンツがトップページではっきりわかる」でした。構造やデザイン、機能は一切お任せ。というか、現物を見ないと判断しようがない、というのが本音のようで…。

こどもきょうしつマーブル

完成したサイト
　こどもきょうしつマーブル（Marble）

サイト制作の情報

・さくらインターネットスタンダード
・WordPress 3.5.1
・テーマ：Small Business »　デモサイト »
・プラグイン：長くなるので文末に

サイト構築

さくらインターネットのWordPressクイックインストールはこちら
外観 → テーマ → テーマのインストール → Small Businessを検索 → インストール → 有効化

カスタマイズ

ポイントカラーをロゴマークの「#E64291」に。（style.css）
バックグラウンドにイメージを設定。（画像＋style.css）
トップページのスライダーを静止画に変更。（画像＋style.css）
メインメニューのバックグラウンドを角丸に。（style.css）
トップページのメインエリアを新着記事から「お知らせ（カテゴリー）」とイメージ画像に。（front-page.php＋画像＋style.css）
「Category Posts Widget」で任意のサイドバーに。（プラグイン）
Googleカレンダーを取り込んでスケジュールページ。（Google）
ビジュアル編集画面を実際のように表示。（functions.php＋editor-style.css）
カテゴリー別に記事の表示を変更（日付の有無など）。（single.php＋追加のsingleページ用phpファイル）
テーブルの表現を統一。（style.css＝thとtdに予めスタイルを設定）

その他いろいろ……

WordPressプラグイン

Akismet…コメントスパム対策
WP Multibyte Patch…日本語の文字などの不具合を補正
Disable Revisions and Autosave…投稿時の自動的下書き保存を停止
Top Level Categories…余分な単語（category）を取り、パスを正しく
Top Level Categories Fix…上記プラグインのバグ解消
All In One SEO Pack…SEO対策に
Google XML Sitemaps…検索エンジンにインデックスを促す
brBrbr…任意の行、改行するために
No Self Pings…サイト内リンクからのピンバックを無くす
Contact Form 7…お問い合せフォーム
Ktai Style…ガラケーでも見られるよう
Category Posts Widget…任意のカテゴリーをサイドバーに
AddQuicktag…タグなどをボタン化して編集画面のメニューに追加
TinyMCE Advanced…ビジュアル編集画面のメニュー強化
TinyMCE Clear…メニューにテキスト回り込み解除ボタンを追加
PS Auto Sitemap…訪問者用サイトマップを自動生成してくれる
Q and A FAQ and Knowledge Base for WordPress…機能的なFAQが作れる
Go To Top…ページのトップにジャンプするボタンを自動で表示
Simple Lightbox…小さく入れた画像を拡大表示（未使用のよう）
WP-DBManager…データベースのバックアップ
高速化のために…
001 Prime Strategy Translate Accelerator
MO Cache
WP File Cache
WP Hyper Response
Quick Cache
※タブレットやスマホ対策は無用とのこと。PCの画面がそのまま見られるのが希望でした。

WordPressのサイトを作りました(WordPress基本のキ？) is a post from: WordPress なら最高！

はじめてのケースで途方に暮れました。カテゴリーアーカイブの/page/2（次ページ）が「404 – Not Found」なんて…。

タグアーカイブの場合は、正常に「/page/2」「/page/3」…と移動できるのに、カテゴリーアーカイブはなぜダメなの？　ページ移動のタグや、ページナビゲーションのリンクが動作していないというわけではなく、ジャンプ先のページがないという雰囲気。パーマリンクに関係するような不具合なのです。

環境

・WordPress 3.4.1
・パーマリンク設定　/%category%/%postname%.html
・このエラーに関係ありそうなプラグイン
　Top Level Categories
　Top Level Categories Fix
・使用テーマ　gazpoMag

　
問題の起きたページ「国際協力と国際交流のNGO＜ハロハロの会ネットワーク＞」
http://www.halohalo-group.com/topics/page/2　で「Error 404 – Not Found」

ページ移動のために試みたコト

1．ページ移動のWordPressタグを追加

<?php previous_posts_link('<<前のページ'); ?>
<?php next_posts_link('次のページ >>'); ?>

2．WP-Pagenaviプラグインのインストール

3．WP-PageNavi を使わずにナビゲーション表示

ここで、移動はなく、パーマリンクの問題と確信。

「/page/2」エラーについて集めた（参考にした）情報

【Wordpress】ページ送り「/page/2」がリンク切れする時の対処法。【next_posts_link()が404】

wordpressプラグイン WP-Pagenaviの不具合と対処方法。

やっと見つけたエラー回避策

カテゴリーベース（Category）を消している場合にページネーションが404になる場合の対応

今回のエラーを解決してくれたプラグイン「WP No Category Base」

助かりました～。ありがとう！！！

カテゴリーアーカイブの2ページ目以降が404 NotFound is a post from: WordPress なら最高！

以前紹介した「TubePress」プラグインですが、動画を取り込んだ画面が突然、非表示になり慌てました。WordPress本体もプラグインも、バージョンアップやカスタマイズなど何もしていないのに、です。画面に「cURL failed」と表示されているのが、せめてもの救い。

Tubepress

これを手がかりにサポートサイトで解決策を探しました。

http://wordpress.org 内プラグインのサポートページでは見つけられず、「TubePress」の制作者サイト内サポートページでやっと発見。

どうしてそうなのか（正常に動いていたものが、何もしないのに動作不良となるワケ）は、私にはわかりませんでしたが、とりあえず解決策が案内されていたので、紹介します。

TubePress 2.4.5 かそれ以前のバージョンの場合は

/wp-content/plugins/tubepress/sys/classes/org/tubepress/impl/http/transports/
CurlTransport.class.php の83行目辺りにある下記を編集。

$this->_handle = curl_init();
　↓
$this->_handle = curl_init($request->getUrl()->toString());

※TubePress 3.0.0 では、99行目辺りだそうです。

詳しい情報のあるTubePressサポートページはこちら

YouTube 取り込みプラグイン「TubePress」突然の非表示 is a post from: WordPress なら最高！

WordPress 基本の画像アップロード枚数は４枚です。元画像、サムネイル、中サイズ、大サイズ。全部のサイズを必要とする時もありますが、元画像＋１サイズで充分な時だってあります。でも温和しくしていたら、アップロードの度に問答無用で４画像がサーバーに溜まり続けます。これを防ぐのはとても簡単、「メディア」の設定をちょっと変えるだけ……。

メディア設定画面

「知らなかった～ぁ」とおっしゃる方がいたので、ちょっと書いておきます。

メディアの設定画面は、
　左サイドバー　»　設定　»　メディア

いらないサイズの画像をアップロードしないようにする

不要なサイズの「幅の上限」と「高さの上限」を未入力（保存後0の表示になる）または「0」にする。

意図しないサイズにならないようにする

イメージしているデザインに合わせて、「幅の上限」か「高さの上限」のどちらか（成り行きにまかせて良い方）を未入力（保存後0の表示になる）または「0」にする。

WordPressのデフォルト設定のように、縮小画像の幅と高さの両方にサイズが入っていると、横長と縦長の画像がバラバラに仕上がります。それは、横長画像は「幅」、縦長画像は「高さ」の値に縛られるからです。

なので、必要でない方の値を未設定状態し、成り行きで処理させます。こうすれば、横サイズまたは縦サイズで揃った画像を記事に配置できます。

◆オマケ

画像のパスを短めにする

　
記事中に沢山画像をはると、ソースは画像のパスだらけになります。前の方は皆同じだから、いらないんだけどなーと思われる方は、画像のパスが相対パスになるように変更すると良いと思います。

メディア設定画面の下の方、「アップロードするファイルの保存場所」の値を「/wp-content/uploads」に。すると、下記のようなパスで画像を表示してくれます。
※ドメイン直下でない場合は、ディレクト名も入れます。このサイトの場合は　/wp_blog/wp-content/uploads　です。

サンプル
http://cook-le.com/wp_blog/wp-content/uploads/2012/08/freefont.jpg
▼
/wp_blog/wp-content/uploads/2012/08/freefont.jpg
となります。

★追記
今、新たなサイトにWordPress 3.4.2をインストールしたら、メディア設定ページの「高さの上限」は0になっていました。いつからこの設定になっているのかなー？　バージョンによっては上記の説明と違っている部分があると思います。

使わないサイズの画像はアップロードしないように設定 is a post from: WordPress なら最高！

またまたムスメからのカスタマイズ依頼。新着記事は公開日の順、それ以外（アーカイブや特集）は、任意の順番に表示したい！と。WordPressをブログではなく、仕事サイトとして使っていく上で当然と思える内容なので、何とかしなくちゃと奮闘し、何とかしちゃったので、その紹介をします。使ったプラグインは「PostMash Custom」。

では、早速……

ムスメのサイト「バレンシア・スペイン語学留学」の上部センターにある「LATEST NEWS」は、公開日順。タブ下の2カラム・1カラム部分（「よく読まれている記事」左）や、アーカイブページ（ARCHIVE: スペイン語学校 HISPANIA, ESCUELA DEなど）は、ムスメが設定した順番に並んでいます。重要度とか、ユーザーの関心度などを考慮した順番なのだと思います。

最初は何も考えず「AStickyPostOrderER」プラグインを入れたのですが、操作が面倒な上、サイト全体の表示順に影響し、「LATEST NEWS」まで変えてしまうので、没！

ソースレベルで操作できるプラグインを探した結果、「PostMash Custom」がピッタリ用途に合いました。

PostMash Custom 導入の手順

１．プラグインの新規追加画面で「PostMash Custom」を検索。

２．インストールして、有効化。

３．左メニュー「投稿」»「Reorder posts」をクリック。

４．「postMash: Post Ordering」ページで公開日かカテゴリで絞り込み。

５．目的のタイトルバーをプレスして、任意の位置に移動し離す。

６．作業完了後、右下の「Upload」をクリックして、確定。
PostMash Custom ７．表示順を変えたい機能のphpファイルを開く。

if(have_posts())　の前に下記のコードを追加する。

<?php
    $wp_query->set('orderby', 'menu_order');
    $wp_query->set('order', 'ASC');
    $wp_query->get_posts();
?>

※phpファイルは、左メニュー「外観」»「テーマの編集」画面の右メニューでファイルを選択で編集できます。ただ、間違えた場合、取り返しのつかないコトになりかねませんので、バックアップをお忘れなく。

私は、怖いんでFTPでphpファイルをダウンロードし、コピーを取った後、編集作業をしています。万一、コピーを忘れてもエディタのアンドゥで元の状態に戻せますから……。

タイトルを見ながら直感的に作業できるので、とても便利です。

公開日に関係なく記事を並べ替える「PostMash Custom」プラグイン is a post from: WordPress なら最高！

前回紹介したWP-Table Reloadedで、娘は表組み作成に成功したようです。が、混乱の元になると思って細かい設定やカスタマイズについて何も触れていなかったら「表組みのセル内を右寄り、左寄りとか、太字にするとか、そういうのはどこで出来るの？」と言ってきたのでした。というコトで追加の記事です。

まず先に、前回説明を省いた部分の説明を少々……。

１．編集項目が表示
ツール → WP-Table Reloadedの「テーブルのリスト」
・横罫で区切られたそれぞれの枠内にオンマウスすると、エクスポートやプレビューなどができます。

２．テーブルをインポートする　情報をエクセルで管理している場合はとても便利！
ツール → WP-Table Reloadedの「テーブルをインポートする」
・エクセルやHTMLで組まれたテーブルをインポートできます。
　インポートフォーマットを選ぶ：CSV　HTML　XML
　テーブルを追加しますか、置き換えますか？：新規　上書き
　インポートファイルのソースを選ぶ：「マニュアル入力」が便利な気がします。
　※この項目にチェックを入れると入力パレットが開きます。エクセル上の目的のエリアをそこにコピペ。）

いよいよテーブルのカスタマイズです

３．ツール → WP-Table Reloadedの「プラグインオプション」
「カスタム CSS」のパレットに、スタイルを書きます。例えば……

スタイルオプションの「テーブルヘッド」にチェックを入れると、この行が項目行となる。項目行は他の行とは違う背景色となる。	◆項目行のテキスト位置　デフォルト　左寄せ　　th {text-align:center} 　センターにする　th {text-align:right} 　　右寄せにする
◆項目行以外のセルのテキスト位置	デフォルト　左寄せ　 td {text-align:center} 　センターにする td {text-align:right} 　　右寄せにする
◆テーブル内のフォントサイズを調節	th, td {font-size:12px}
▼ 以下、WP-Table Reloadedのルール
★★5行目の背景色を赤、テキストを白	.wp-table-reloaded-id-1 .row-5 td { background-color: #ff0000!important; color:#fff; }
★★6行目の2列目のセル背景色を赤、テキストを白	.wp-table-reloaded-id-1 .row-6 .column-2 { background-color: #ff0000; color:#fff; }

★★は設定を反映させています。cssがまるっきりわからないと難しいですね、やっぱり。一応説明すると

.wp-table-reloaded-id-1 .row-6 .column-2 {
background-color: #ff0000;
color:#fff;
}

id-1 …… 数字がテーブル番号
row-6 …… 6行目
column-2 …… 2列目
background-color: #ff0000; …… 背景色赤
color:#fff; …… テキスト色が白（#ffffff ＝ #fff）

※WP-Table Reloadedのルールは、プラグインのFAQページにあります。

ただ、テーブル内をいろいろ装飾するととても見にくくなります。多くの場合、見やすくするための表組みですから……。体裁を統一した方がきれいなページに仕上がる気がします。

多く見られる体裁は、項目行は他と違う背景色でテキストはセンター。それ以外のセルはすべて左寄り、かな？

凝った体裁が必要な場合は、「TinyMCE Advanced」が便利です。ただし当たり前ですが、セルやセル内のテキストを装飾するたびに、スタイルのソースがドンドン増えて、かなり嬉しくないです。ついでなので、次回はTinyMCE Advancedの使い方を紹介します。

この記事の前編「WordPressの表組み（table）は、小技のきいたWP-Table Reloadedがいいかも」

2つ続けてWP-Table Reloadedの記事を書きましたが、娘のスペイン留学サイトには不向きだそうです。で、第2弾として「TinyMCE Advanced」を紹介します（普通は、こちらを先に試すのかもしれません。が、直前に使ったクックるの表組みがあまりに良かったので、つい……）。

TinyMCE Advanced

◆TinyMCE Advanced 導入の手順

１．プラグインの新規追加画面で「TinyMCE Advanced」を検索。

２．インストールして、有効化。

３．左メニュー「設定」»「TinyMCE Advanced」
　「TinyMCE Buttons Arrangement」ページで編集用ボタンを取捨選択。

・上部グレー背景のボタンは現在編集画面に設定されている機能。

・下部枠線内のボタンは設定可能の機能。

※ドラッグして使う機能のボタンを入れ替える。今回は「Table」と「Visual Aids」を上部に移動。

４．投稿または固定ページなどの任意の場所にカーソルを置き、上部メニューの「テーブル挿入ボタン」をクリック。

CSS（スタイルは文末を参照）であらかじめ、テーブルのスタイルを設定している場合のやり方です。

[1]「表を挿入」ボタンをクリック。
[2]「列」「行」の値を入力。「表の見だし」は必要ならチェック。他は無視。
[3] 項目行にしたい行をドラッグで選択（ハイライト）。
[4]「セルのプロパティ」ボタンをクリック。
[5]「セルの種類」を「ヘッダー」にする。

　
◆サンプル

見出し
ヘッダー１	ヘッダー２	ヘッダー３	ヘッダー４	★ヘッダーはセンター
データ１	データ２	データ３	データ４	★データは左寄り

　
◆私のテーブル用CSS

table{
border-collapse:collapse;
border:1px solid #808080;
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

table caption{
text-align:left;
}

th{
padding:6px 8px;
background-color:#E0E0E0;
font-size:12px;
font-weight:bold;
border:1px solid #808080;
}

td{
padding:6px 8px;
border:1px solid #808080;
font-size:12px
}

※「table caption」は「表の見だし」の部分です。記事中、画像下のキャプションをセンターにしているので、表組みの見だし用にleftの設定をしました。

「テーマ TCD「Opinion」の大幅カスタマイズ」のうち、「3.「最近の記事」を特定カテゴリーの新着記事に変更」の手順。

最も簡単と思われ、且つソースコードを解さない管理人（長女）のため、見た目にわかりやすいやり方法にした。

テーマフォルダ内の「index.php」を開き、下記を編集する。

「最近の記事」を特定カテゴリーの新着記事に

　
index.phpの53行目あたり

$args = array(‘post_type’ => ‘post’, ‘posts_per_page’ => 6);
　　　　▼
$args = array(‘post_type’ => ‘post’, ‘posts_per_page’ => 6, ‘category’ => 15);

※カテゴリーIDが「15」の記事を6タイトル並べる

項目のタイトルと、右端「▲過去の記事」を任意に文言にする

　
＜h3 class=”headline1″＞＜?php _e(“Recent post”,”tcd-w”); ?＞＜span>＜?php next_posts_link(__(‘Archives’, ‘tcd-w’)) ?＞＜/span＞＜/h3＞
　　　　▼
＜h3 class=”headline1″＞＜!–?php _e(“任意の文言に編集”,”tcd-w”); ?–＞＜a href=”該当カテゴリーのURL”＞任意の文言＜/a＞＜/h3＞

「バレンシア・スペイン留学」は下記とした。
＜h3 class=”headline1″＞＜?php _e(“語学学校紹介”,”tcd-w”); ?＞＜a href=”http://valencia-ryugaku.com/school”＞語学学校一覧＜/a＞＜/h3＞

★括弧「＜」と「＞」は全角にしてあるので、コピペの際（そんな人いるかな？）は半角に！
★FTPでダウンロードして編集する時はファイルの文字コードを「UTF-8N」にし文字化け回避。

これまでいくつかGoogleマップを取り込むプラグインを紹介しましたが、正真正銘、簡単で安定していて使い勝手の良いプラグインを見つけたので紹介します。

Basic Google Maps Placemarks »
※プラグイン → 新規追加 →（検索窓）Basic Google Maps Placemarks → インストール → 有効化

・地図上に複数のマーカーを表示できます。

・マーカーは任意の画像を指定できます。

・表示する範囲や地図の中心を指定出来ます。

・同一カテゴリーだけのページなども作れます。

・入力した地図データをリスト表示できます。

・cssを少しいじればレスポンシブにできます。

・情報ウィンドウに画像を入れられます。

Basic Google Maps Placemarksの設定

左サイドバー → 設定 → 「Basic Google Maps Placemarks」

数値と中心位置以外は初期設定で大丈夫。
・Map Center Address…日本語でOK。

・Zoom…表示を確かめながら最適の値を探る。

・Map Width…表示するPCのページのサイズに合わせる。

・マップの見栄えを良くするために、プラグイン内のstyle.cssを編集。

スマホの横幅に納める
　#bgmp_map-canvas の幅を「width: 100% !important;」に変更。

情報ウィンドウ内の画像とテキストがくっつくので、画像の右側にスペースを作る
　#bgmp_map-canvas img　「margin: 0 4px 0 0;」に変更。

情報ウィンドウと地図情報の入力

プラグインの有効化でサイドバーに「Placemarks」メニューが追加されます。
この編集画面に入力されたデータが、情報ウィンドウに表示されます。アイキャッチ画像が地図上のマーカーです。

「Stacking Order」は、重なり順をコントロールするメニューです。初期設定は0なので、複数のマーカーが重なっている場合は、1番下はそのまま、その上を1…というように、上になるほど値を大きくします。

マップの表示画面を作る

投稿または固定ページの新規画面を開き、地図を読み出すショートカットを追加します。

▼ ショートカットの例
[bgmp-map]
　…入力したすべての情報をマップ上に表示。

[bgmp-map categories=”parks,restaurants” width=”500″ height=”500″]
　…カテゴリーとサイズを指定して表示。

[bgmp-map center=”chicago” zoom=”10″ type=”terrain”]
　…表示する地図の中心位置とズーム、タイプを指定して表示。

[bgmp-list]
　…情報を地図ではなく、テキストでリスト表示。

1つの情報で地図とリストが出来るのがとても便利。情報がそれほど多くなければ、地図とリストを同じページの上下に置けば、便利かもしれません。

マッシュアップ地図の入力はどのプラグインでも結構面倒だったのですが、「Basic Google Maps Placemarks」は本当にストレスなく作業できます。

TinyMCE Advanced

◆TinyMCE Advanced 導入の手順

１．プラグインの新規追加画面で「TinyMCE Advanced」を検索。

２．インストールして、有効化。

３．左メニュー「設定」»「TinyMCE Advanced」
　「TinyMCE Buttons Arrangement」ページで編集用ボタンを取捨選択。

・上部グレー背景のボタンは現在編集画面に設定されている機能。

・下部枠線内のボタンは設定可能の機能。

※ドラッグして使う機能のボタンを入れ替える。今回は「Table」と「Visual Aids」を上部に移動。

４．投稿または固定ページなどの任意の場所にカーソルを置き、上部メニューの「テーブル挿入ボタン」をクリック。

CSS（スタイルは文末を参照）であらかじめ、テーブルのスタイルを設定している場合のやり方です。

[1]「表を挿入」ボタンをクリック。
[2]「列」「行」の値を入力。「表の見だし」は必要ならチェック。他は無視。
[3] 項目行にしたい行をドラッグで選択（ハイライト）。
[4]「セルのプロパティ」ボタンをクリック。
[5]「セルの種類」を「ヘッダー」にする。

　
◆サンプル

見出し
ヘッダー１	ヘッダー２	ヘッダー３	ヘッダー４	★ヘッダーはセンター
データ１	データ２	データ３	データ４	★データは左寄り

　
◆私のテーブル用CSS

table{
border-collapse:collapse;
border:1px solid #808080;
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

table caption{
text-align:left;
}

th{
padding:6px 8px;
background-color:#E0E0E0;
font-size:12px;
font-weight:bold;
border:1px solid #808080;
}

td{
padding:6px 8px;
border:1px solid #808080;
font-size:12px
}

まず先に、前回説明を省いた部分の説明を少々……。

いよいよテーブルのカスタマイズです

３．ツール → WP-Table Reloadedの「プラグインオプション」
「カスタム CSS」のパレットに、スタイルを書きます。例えば……

スタイルオプションの「テーブルヘッド」にチェックを入れると、この行が項目行となる。項目行は他の行とは違う背景色となる。	◆項目行のテキスト位置　デフォルト　左寄せ　　th {text-align:center} 　センターにする　th {text-align:right} 　　右寄せにする
◆項目行以外のセルのテキスト位置	デフォルト　左寄せ　 td {text-align:center} 　センターにする td {text-align:right} 　　右寄せにする
◆テーブル内のフォントサイズを調節	th, td {font-size:12px}
▼ 以下、WP-Table Reloadedのルール
★★5行目の背景色を赤、テキストを白	.wp-table-reloaded-id-1 .row-5 td { background-color: #ff0000!important; color:#fff; }
★★6行目の2列目のセル背景色を赤、テキストを白	.wp-table-reloaded-id-1 .row-6 .column-2 { background-color: #ff0000; color:#fff; }

★★は設定を反映させています。cssがまるっきりわからないと難しいですね、やっぱり。一応説明すると

.wp-table-reloaded-id-1 .row-6 .column-2 {
background-color: #ff0000;
color:#fff;
}

id-1 …… 数字がテーブル番号
row-6 …… 6行目
column-2 …… 2列目
background-color: #ff0000; …… 背景色赤
color:#fff; …… テキスト色が白（#ffffff ＝ #fff）

※WP-Table Reloadedのルールは、プラグインのFAQページにあります。

多く見られる体裁は、項目行は他と違う背景色でテキストはセンター。それ以外のセルはすべて左寄り、かな？

この記事の前編「WordPressの表組み（table）は、小技のきいたWP-Table Reloadedがいいかも」

サイトマップは今や必須。だけど結構面倒くさい。そんな時、手間暇かけずに見栄えの良いサイトマップを作ってくれるプラグイン「PS Auto Sitemap」がいいかもしれない？　13パターンのスタイルが用意されているので、サイトの雰囲気に合わせ選択できます。

当サイトのサイトマップ

◆PS Auto Sitemap 導入の手順

PS Auto Sitemap 設定画面

１．プラグインの新規追加画面で「PS Auto Sitemap」を検索。

２．インストールして、有効化。

３．投稿「新規追加」または固定ページ「新規追加」画面に下記をコピペ。サイトマップなど適当なタイトルをつけて保存。
＜!-- SITEMAP CONTENT REPLACE POINT --＞
※＜＞括弧を全角にしてありますので、半角に直してください。

４．保存した編集画面上部のアドレスバーから記事のIDを確認。
wp-admin/post.php?post=38&action=　»　記事ID＝38

５．左メニュー「設定」»「PS Auto Sitemap」で設定画面し、「サイトマップを表示する記事」欄に記事IDを入力。

６．その他はサイトに合わせ任意に設定。

PS Auto Sitemap プラグイン配布先

◆PS Auto Sitemap 13のスタイル

シンプル

シンプル２

チェックリスト

蛍光ペン

ドキュメントツリー

付箋

音符

矢印

ビジネス

索引

アーバン

アンダースコア

キューブ

簡単に導入できる反面、ちょっと困った事も。

記事数が多くなったとき、どこか任意の場所または規定の行数でページ分割できると良いんだけど、その機能はないです。だから記事数が多くなった場合は、階層で制御するしかないかもしれません。

WordPressに動画を取り込みたいシーンが結構ありますよね、最近。WordPressをはじめ、PCやソフトのマニュアルも動画で案内されるコトが多いですし、ニュースも音楽も動画サイトで臨場感たっぷりに見られますから。

そんな時に便利な動画取り込みプラグイン「TubePress」を紹介します。あっけないほど簡単に動画一覧のページが出来てしまいます。

TubePress プラグイン配布

TubePress の使い方

※vimeo の動画も取り込めるようですが、説明は YouTube で。

YouTube のアカウントを取得（必須ではないですが、取り込む動画の括りによっては必要）
プラグイン「新規追加」から「TubePress」をインストール、有効化。
左メニュー「設定」»「TubePress」をクリックし、設定画面に移動。
「Which videos?」で、取り込む動画の括りを設定。（※左の画像）
「Thumbnails」で、サムネイルのサイズやページネーションの位置を設定。（※中央の画像）
「Player」で、動画再生の仕方やそのサイズを設定。（※右の画像）
投稿または固定ページに [tubepress] をタイプし、公開。

Which videos?

Thumbnails

Player

取り込む動画を絞り込む場合は……

TubePress 取り込みショートコード

WordPressを使った料理サイトを時々見かけるようになりました。私の運営する「クックる」もそうです。が、どうもレシピの部分に工夫が足りない感じ。統一感もイマイチだし。なので、カスタムフィールドを使ってテンプレート化しようかな、なんて思っていた時、目的にピッタリのプラグインを見つけました。至れり尽くせりの優れもの「ReciPress」。少々バグがあったので、その修正版（back.js）共々ご紹介します。

ReciPressでできた画面

ReciPress（動画マニュアルあり）

インストール

１．プラグイン » 新規追加で「ReciPress」を検索。

２．「いますぐインストール」をクリックし、有効化。

３．左メニューの「ReciPress」»「ReciPress 設定」を開く。
※日本語バージョンが用意されているので、設定は難しくないと思います。

・「レシピを投稿に追加？」……
　「はい投稿にレシピを追加します」なら、記事の下段
　「いいえショートコード [recipe] でレシピを追加します」なら、記事中の任意の場所にレシピを置けます。

ReciPress の設定画面

ReciPress の編集画面

設定や編集画面は左の画像のようになります。色味や配置などは、配布時のものとは若干違います。

・レシピ部分の背景画像

・レシピタイトルの装飾

・「材料」の並び順（材料名・量の順に変更。← 日本的？）

・レシピ内のリンク色（元はグレー。リンク設定されているのか分かり難いので）

・フォントサイズを統一（細かく設定されていましたが、漢字＋仮名だとゴチャゴチャ感が避けられず）

ReciPressプラグイン配布

画像取り込みのバグ修正フィイル back.js のダウンロード
　（位置　/plugins/recipress/js/back.js）
材料の順番を変えた修正ファイル functions.php のダウンロード
　（位置　/plugins/recipress/php/functions.php）
　※ダウンロード後、拡張子を .txt → .php に変更してください。
テキストの装飾など修正ファイル front.css のダウンロード
　（位置　/plugins/recipress/css/front.css）

■上記3ファイルをまとめてダウンロードする場合はこちらから recipe_dl.zip

◆その他のレシピプラグイン

RecipeCan Recipes
ZipList Recipe Plugin
GetMeCooking Recipe Template
RecipePress

◆レシピサイト用テーマ
10 Delicious Food and Drink WordPress Themes（超カッコイイ！　有料）

追記
「Comprehensive Google Map Plugin」は開発もメンテナンスも終了しているので、「Maps Marker Pro」を勧めるアラートが表示されました。管理画面にトラブルも見られますので、このWordPressから削除します。

Attention: the development and maintenance of the "Comprehensive Google Map Plugin" has been discontinued!
A switch to the mapping plugin "Maps Marker Pro" is recommended - please click here for more information

「Lightweight Google Maps」もダメ、「Geo Mashup」もイマイチ動作が危ない、そして3つめの「Comprehensive Google Map Plugin」。使いやすさ、安定度とも、決定版かも？

その他にも、WordPress のプラグインサイトで評判の良さそうなのを試用したけれど、機能や表現の面で物足りなかったし…。

「Comprehensive Google Map Plugin」の主な機能
グローバルマップ（一覧＝Mashup）と記事ページの地図が自動で連動。
ウィジェットにも対応。
マップ上のマーカーを選べる。
個別ページ上に複数のマーカーを置ける。
その他、設定できる項目がいろいろ…。
「Geo Mashup」のバグフィックスをしてくれたプログラマ君もこれを使っているもよう（信頼度アップ）。

1．インストール
プラグイン「新規追加」から「Comprehensive Google Map Plugin」をインストールし、有効化。

2．設定
左メニュー「設定」の下に「Google Map」項目が追加。

個別ページへの挿入

プラグインを有効化すると、投稿編集画面の下部に多くの設定項目が表示されます。

・絶対に必要な設定は、右図の３つです（が、表示サイズや倍率、マーカなど細かい設定もどうぞ）。

※「Enter marker info bubble text here(optional)」欄は「optional」じゃないようです。
　この欄を空にしたままだと、アラートが出て先に進めませんので、適当なテキストを！

・最後に「Send to Editor」をクリックすると、編集画面のカーソル位置にマップのコードが挿入されます。

マッシュアップマップのページを作る

・左メニュー「Google Map」の「Shortcode Builder」をクリック。開いた画面がマッシュアップマップの設定画面です。サイズや表示を自由に設定します。

・中程のメニュー「GEO Mashup」の「Make this map a Marker Geo Mashup」にチェックを入れるとマーカーが非表示になります。各記事で設定した地図のポイントを一括表示するためなので、マーカーはいらないですから。

・すべての設定が終わったら、「GENERATE SHORTCODE」をクリック。別パレットに書き出されるコードをコピーして、投稿か固定ページにペースト。

ウィジェットで使う

・ウィジェット挿入画面に「AZ::Google Map」という項目が追加されるので、それをサイドバーやフッターなど任意の位置にドラッグ＆ドロップ。

・目的の場所にマーカーを設置することも、マッシュアップマップを作る事もできます。

ちょっとだけ使い易くする

不要なマーカーを削除

・マーカーが多すぎる（こんなにいらんって！場所取るし）。なので、使いそうなマーカーだけ残し、あとを削除＆表示スペースを縮める。

・「/wp-content/plugins/comprehensive-google-map-plugin/assets/css/images/markers/」内の不要なマーカーを削除。
※爆笑！マーカーを引っ張っているソースがわからないので、原始的に「ナシ」に。

そのままだと高さが変わらないので、functions.php の377行目あたりを編集。

$items = &amp;quot;&amp;lt;div id='&amp;quot;.$attr['id'].&amp;quot;' class='&amp;quot;.$attr['class'].&amp;quot;' style='margin-bottom: 15px; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; height: 200px; overflow: auto;

　　　▼

$items = &amp;quot;&amp;lt;div id='&amp;quot;.$attr['id'].&amp;quot;' class='&amp;quot;.$attr['class'].&amp;quot;' style='margin-bottom: 15px; padding-bottom: 10px; padding-top: 10px; padding-left: 30px; height: 60px; overflow: hidden;

自分用のマーカーをプリセットされた状態にしたい時は…

「/wp-content/plugins/comprehensive-google-map-plugin/assets/css/」内の「cgmp.admin.css」を編集。

fieldset.fieldset table input.default-marker-icon{background:url('images/markers/1-default.png') no-repeat scroll 0 0 transparent !important}

個別ページに入れるマップのサイズを任意の値にセットしたい時は…

「/wp-content/plugins/comprehensive-google-map-plugin/data/」内の「html.elements.form.params.json」を編集。

20行目あたり
　 "dbParameterName" : "width",
"dbParameterValue" : "400",　　　← よく使う横サイズに

28行目あたり
"dbParameterName" : "height",
"dbParameterValue" : "250",　　　← よく使う縦サイズに

▼ こんな感じ（プラグインを削除したので、画像サンプルとなります）
mapサンプル

WordPress に Welcart プラグインを入れて、友人のネットショップを暮れにオープン。WordPress に組み込むショッピングカートを何にするか随分悩みました。いくつか試してはみたものの、海外のプラグインでは決済の部分が思うように設定出来なかったり、細かいカスタマイズが英語ゆえ理解出来なかったり、更にフォーラムなどの文章がちゃんと理解できないので、折角案内されているTipsがわからなかったり……。

で、最終的にやっぱり「Welcart」。国産という得難いメリットは見逃せないもの。日本語、というだけでなく、日本のネットショップ事情にあった構成になっているし、決済方法も問題ないし……。

以前に１度、Welcart をデフォルトのテーマで使ったコトがありますが、今回は凝ったデザインで、思うようなショップ作りをしてみました。

和の器　工房草來舎

テーマはGabfire Themesの「Advanced Newspaper」。standard pack で59ドル。それに見合う機能を充分に持っているテーマです。いくら頑張っても、これほどのモノは作れないので、勉強も兼ねてアッサリ購入。

そこに前述の「Welcart プラグイン」を入れ、ちょこちょこカスタマイズしてみました。WordPress で使える、とか、カートに入った時アドレスが変わらないとか、無料とかメリットはたくさんありますが、ショッピングカートそのものとしても、なかなか優秀だと思います。

タクソノミーの機能を使って、カート部分と投稿が分離されています。なので、ショップ、ブログ、ページといった３段構えでサイト構築できるのが、後々管理をラクにするなーと思っています。

カートやメール、それぞれの場面のテキスト編集も簡単ですし、受注リストや顧客リスト、ポイントのシステムなどもあり、小規模のショップなら充分ではないかと思います。

ショッピングカートプラグイン「Welcart」

WordPressの「リンク」メニューを使って、とても簡単にリンク集ページを作れるプラグインを発見しました。もちろん「ページ」にサイト名や概要を書き、リンクを貼る、っていう手もありますが、ちょっと面倒。自動で体裁も整えたいし……。

で、このプラグイン「WP Render Blogroll Links」。通常のプラグイン同様、サーバーにインストールして、管理画面で有効化。

使い方は……

１．管理画面の「リンク」メニューから、リンク集の情報をアップする。

入力する項目は、表示させたい項目となるけれど、少なくともリンク先のサイト名とウェブアドレスは必須ですよ、やっぱり（笑）。

あと、私は「説明」と「リンクターゲット」、詳細の「画像のアドレス」を使いました。

「説明」は、リンク先の概要。サイトタイトルとあまりマッチしていないコンテンツとか、全然想像出来ない内容……というのもありますから。

「リンクターゲット」は「 _blank」。新規ウィンドウは、右クリックでコントロールできるので、コントロールできない同一ウィンドウの設定が良いのだ、という意見もあるけれど、私が便利と思うのは、サイト内は同一ウィンドウ、外部サイトは新規ウィンドウ。なので、この設定。

「画像のアドレス」は、予めFTPソフトでアップロードしてある画像のパスを入力。サムネールなどの機能はないので、表示サイズそのままの画像を用意する。私は100px×100px。
２．新規のページにリンク情報を読み出すためのコードを１行書く（コピペ）。

私は概要（description）を表示させたいので、

［wp-blogroll showdesc=1］（カッコは全角にしてあります）

表示のさせ方が沢山ありますので、かなり自分好みに出来るとおもいます。

詳しい説明とコードはこちら
　
 ３．こんな感じに出来上がり！

いや待って、まだあった。上記で一応、リンク集のページは出来るけれど、あまりにも素っ気ない。

それにテキスト量が少ないと、次の画像が食い込んでくるし……。

なので、チョコッとスタイルシートで格好を付けてみました。

＜li class="brlink"＞リンク情報＜/li＞（カッコは全角にしてあります）と、brlink で括られているので、下記のように……。

.brlink{
min-height:104px;
border-bottom: dotted 1px #999;
clear:both;
padding-bottom:5px;
margin-bottom:5px;
}

追記テキストを右側に回り込ませる。

.brlink img {
float: left;
padding-right:5px;
}

出来上がったリンク集のページ

WP Render Blogroll Links のダウンロードはこちら

Print Friendly and PDFの設定

チェックボックス フォーム画面に1項目ずつ改行して表示

チェックボックス 受信メール本文でも１項目ずつ改行表示

テンプレート集

スタイルシートでどのようにでも……

サイト制作の情報

サイト構築

カスタマイズ

WordPressプラグイン

環境

ページ移動のために試みたコト

「/page/2」エラーについて集めた（参考にした）情報

やっと見つけたエラー回避策

いらないサイズの画像をアップロードしないようにする

意図しないサイズにならないようにする

画像のパスを短めにする

PostMash Custom 導入の手順

まず先に、前回説明を省いた部分の説明を少々……。

いよいよテーブルのカスタマイズです

Basic Google Maps Placemarksの設定

情報ウィンドウと地図情報の入力

マップの表示画面を作る

まず先に、前回説明を省いた部分の説明を少々……。

いよいよテーブルのカスタマイズです

チェックボックス　フォーム画面に1項目ずつ改行して表示

チェックボックス　受信メール本文でも１項目ずつ改行表示