facebook コメントの設置

facebook へログインしてから
https://developers.facebook.com/docs/reference/plugins/comments/
へアクセスします

URL to comment on (?)
へサイトのURL

Width (?)
は横幅

Number of posts (?)
には最大投稿件数

Color Scheme (?)は
light

これで
Get Code
をクリックすると
コードがでるので、これをコピペします

Facebook LikeBox 作成

https://developers.facebook.com/docs/reference/plugins/like-box/
へアクセスし
Facebook like box を作成できます

ただし、事前にfacebook ページの作成が必要です

facebook ページの作成には
http://web-tan.forum.impressrd.jp/e/2012/05/30/12806
が参考になります

去年、タイムラインが導入されていますので
あまり古い記事は仕様変更のため
実際には使えないというケースがあるので
注意が必要です

facebook debuger

OGP 文法チェックには
facebook debugger を使います

https://developers.facebook.com/tools/debug
へアクセスし
デバッグしたいページのURLを入力します

OGPについて

OGPは
Open Graph Protocol の略名で
Facebook や Google+
で使われている

これは、プログラムにページの意味を理解させやすくするHTMLの付加情報

facebookが一番わかりやすい例で
いいねボタンがおされたときに
その内容がでるというもの

これを作成するには
いいねボタンを作成したときと同じように
LIke Button を作成する
https://developers.facebook.com/docs/reference/plugins/like/

ただし、今回、入力するのは、ふつうに
いいねボタンを作成する Step1 ではなく
その下にある
Step 2 - Get Open Graph Tags
のほう

Title (?)
にタイトルを入力

Type には article

URLにはサイトURL

Image (?)はなくてもOK

Site name (?)
にサイト名

Admin (?)
はそのまま表示されている数値を使う

最後に get　Tags
をクリックしてコード生成

タグの中の解説になrますが
fb:admins
管理者ID

og:title
タイトル

og:type
記事のタイプ

og:url
URL

og:site_name
サイト名

og:locale
ロケーション情報

og:image
アイキャッチ画像があればそれを使う
ないならデフォルト

og:description
各ページ本文からの抜粋文

Facebook いいねボタン設置

まず、Facebook のアカウントを作成します

アカウント作成については
Facebookのアカウントを作成する

を参照

アカウントを作成し、ログインしたら
Like Button ページへアクセスします

https://developers.facebook.com/docs/reference/plugins/like/

以下の必要な項目を入力していきます

URL to Like (?)
サイトのURL

Send Button (XFBML Only) (?)
のSend Buttonのチェックを外しました
（送信ボタンがなくなります）

Layout Style (?)
レイアウトの設定になります
基本的に standard のままでよいと思います

Width (?)
でボタンの幅を設定

Show Faces (?)
チェックをいれると、顔が表示されます

Font (?)
フォント（文字の大きさです）
デフォルトのままでもOKです

Color Scheme (?)
背景色です
light から dark にすると、背景色が黒くなります

Verb to display (?)
ぼたんの切り替えです
like ならいいねボタン
recommend ならおすすめボタンに変化します

最後に get Code でコードを生成し、
できたものをコピペします

はてなブックマークボタンの設置にかんしては

はてなブックマークボタンの作成・設置について
http://b.hatena.ne.jp/guide/bbutton
を参考にというか、そのままここで作成できる


次に、twitter ボタンの設置

twitter ボタンを作成するには
http://twitter.com/about/resources/buttons#tweet
で言語設定をしたら
スクリプトがでるので、あとはコピペ

次は、Google+の＋１ボタンの設置
www.google.com/webmasters/+1/button/index.html
へアクセスしボタンを作成
ただし、今は英語サイトのようなので
解説を追加

まず、size で大きさを設定

Annotation
はバルーンを選択しました

Language
は日本語を選択

Advanced options
は詳細設定なので
ここで
HTML5 valid syntax
にチェックが入っているのを確認
（意味は、有効なHTML５の構文らしい）

URL to +1
のところへ、＋１ボタンの対象になるサイトURLを指定

これで、画面の右側に
Look good? Copy the code?
の下のところへ
Google+ のボタンの画像と
それを生成するコードがでるので、このコードをコピペします

コメントテンプレの作成

コメントテンプレはデフォルトで表示はされるけど
実は wordpress 非推奨
なので、実は自作したほうがいい

その中で使う関数などのメモ

if(post_password_requred());
当該記事がパスワードで保護されているか判断
保護されているならコメント処理を中段

記事への
パスワード設定は
記事を編集する画面で
ステータスのところに編集があるので
ここでパスワード保護にすればOK

if(have_comments())
当該記事にコメントがある場合の表示処理を分岐する

get_the_title()
記事のタイトルを取得

get_comments_number()
記事についているコメントの件数を取得

wp_list_comments()
実際のコメントを出力
引数でアバター画面のサイズを設定

if(get_comment_pages_count >1 && get_option('page_comments'))
コメントをページャで分割表示するか否か判別
分割表示するなら
previous_comments_link()
next_comments_link()
で
分割されたページへのリンクを
引数リンク文字として出力

comments_form();
コメントフォーム表示

コメント受付をコラムカテゴリのみにする

functions.php に関数を作成し
add_filter() でcomments_openフィルターフックへ
comments_allow_only_column()
を登録する

コメントカテゴリでは true
それ以外なら false にすることで
コメント機能の有効、向こうを制御する

add_filter()
の第3引数で優先順位を指定している
前回は１１だったけど
基本は１０
同じフィルターフックに登録されている関数は優先順位の高い順、つまり数字の小さい順番に
実行される
第4引数では、関数に渡す引数の値を２にしている

設定完了語、コメント欄ができるので
コメントして実験

ログインしているときと、していないときでは動きが変わる

コメント表示条件を変更するには
ダッシュボードの　
設定 > ディスカッション設定で
おこなう

通常の設定だと
承認していないユーザのコメントは
そのままでは表示されないため

ダッシュボードにある
コメントをクリックするとコメント一覧がでるので
コメントのところにマウスオーバーすれば
承認するかでるので
ここで承認すれば、コメントが表示されるようになります

wordpress コメント欄作成

coments_template('',true);
で
コメントテンプレートの読み出しをする

もし、テンプレが作成されていないなら
wordpress 本体の
コメントテンプレが適用される
この場合は、デフォルトのコメント欄表示になる

第一引数の'' へコメントテンプレのファイル名を書く
これを省略した場合には
comments.php になる

第2引数には
true ならコメントを分けて表示する
false ならわけて表示しない

あと、特定のカテゴリ内か判断する
in_category()
とか、個別投稿記事か判断する
is_single()
のようなテンプレタグをif とかで条件分岐させて
表示する内容を制御するということもできる

これについては
wordpress codex 日本語版 条件分岐タグ

が参考になる

wordpress 関数メモ（RSS関連）

th_feed_link()
RSSフィードへのリンクを出力するテンプレタグ
引数にはリンク文字列を渡す

if(is_category('column') || (is_single() && in_categry('column'))):
でコラム　カテゴリ内か否か判断する

get_ctegory_feed_link()
カテゴリを限定したRSSフィードのURLを取得する
引数はカテゴリのID

カテゴリIDは
get_category_by_slug('column')->term_id
で取得

ソースコードを見直すときに使える diffコマンド

新しくプログラミングを勉強する時に
ソースコードがあるなら
もし、稼働しないときには
diff コマンドで比較すると
違いに気づけます

今回、
get_template_directory_uri()
とするところを
get_template_directory_url()

となっていました

ソースはダウンロードしていたので
diff sidebar.php ~/ダウンロード/source/sidebar.php
とすることで違いを比較し
間違いに気づきました

ソースのコピペだけだとどこが間違っていたのかが
わかりにくいので
一度比較して、間違いさがししたほうが勉強には効率的です

wordpress 抜粋文を入力可能にする

標準の状態では無理なので

add_post_type_support('page','excerpt');

を追記する

add_post_type_support()
は投稿タイプ別に追加機能の設定をする関数

page
は固定ページ

excerpt
は追加機能に抜粋を指定している

関数をまとめて記述しているファイルに追記したら

次にダッシュボードの固定ページ一覧の記事を表示して
表示オプションで抜粋へチェックをいれれば
抜粋文が使えるようになる

wordpress 投稿関連のメモ

previous_post_link()
next_post_link()
は
前後の記事への『リンクを出力するためのテンプレタグ

%link
でフォーマットを通常に指定

%title
でリンクテキストをページのタイトルに指定

true
で前後記事を同一カテゴリの記事に限定する



excerpt_more フィルターフックで
抜粋文の最後につく文字列を変更できる

excerpt_mblenghtフィルターフックで
文字数を
WP Multibyte Patch 標準の１１０文字から
１２０文字から変更できる

wordpress 検索関連のメモ

the_search_query()
で検索ワードを出力

if(have_posts() && get_search_query()):
で
検索機能と検索キーワードがともに存在するか否か
チェックする

while(have_posts()):
で
wordpress ループを実行し、
検索結果おページャーを出力

if(isset($_GET['s']) && $_GET['s'] == false)
これで
検索キーワードが未入力か否か
０か否かを判断する

この場合
add_action()で
template_redirect アクションフックへ
search_template_redirect()
を登録する

template_redirect アクションフックは
wordpress によるページ種別ごとのテンプレが選択される
直前のタイミングで実行される

search_template_redirect()の中の
$wp_query()
は、Wordpress の内部データを保存するオブジェクト

search.php をテンプレとして選択した際に
正しく動作するように
wp_queryのプロパティを一部書き換えてから
search.php をテンプレとして読み込む

php のソースの ?> がないことについて

PHPのリファレンスとか
サンプルソースで
?>
が書いていないソースコードのファイルがありますが
これはミスではありません

PHPの閉じタグの
?>
は
ここでPHPが終わってHTMLに切り替わることを意味します

なので、PHPのコードのみのファイルとか
関数を記述しているファイルの場合
?>
が存在しないことがあります

逆に
<?php
は
PHP開始を意味しますが
これをつけていないとHTMLと認識されてしまうため
PHPファイルの場合、こちらを省略することはできませんので注意が必要です

ページャーを出力するプラグイン

Wordpress では
Prime Strategy Page Navi
というプラグインを使うことで
簡単にページャー設定ができます

まず、ページャーのプラグインである
Prime Strategy Page Navi
を有効にします

ダッシュボード > プラグイン >
インストール済みのプラグインの中から
Prime Strategy Page Navi
を探して有効化します

そして
page_navi()でページャーを出力します

ちなみに
page_navi() も
プラグインが定義するテンプレートタグ
ソースを記述するときには
プラグインが有効でない場合を考慮して
function_exists()
でチェックしておく

パラメータの
edge_type=span
で
1ぺーじおよび最終ページで前後ページへのリンク
最初と最後ページへのリンクの表示方法を指定する

none だと表示しない
span だとリンクなしで表示
link だとリンクつきで表示
となる

ちなみにデフォルトでは none になっている

コードの追記と設定ができたら
管理画面のダッシュボードへいって
設定 > 表示設定　で
1ページに表示する最大件数を
少なくすればページャーの設定が反映される

wordpress 関数メモと参考サイト

the_author_posts_link()
作成者名の表示
作成者別の一覧ページのリンクを出力する

is_author()
作成者別一覧ページか否か判断する

get_query_var('author')
ユーザID取得

display_nameと取得したユーザIDを
パラメータにして
get_the_author_meta()
へ私
ユーザのブログ上の表示名を取得

is_single()
投稿か調べる

the_time()
投稿時刻を出力

the_author_posts_link()
作成者名の表示と
作成者別一覧ページのリンクを出力

関数に関しては
wordpress 私的マニュアル
が参考になります

wordpress の権限とグループ

通常は

管理者
編集者
担当者
寄稿者
購読者

となり、
マルチサイト機能を有効化すると
マルチサイトを管理できる
所有管理者というものもある

管理者は、名前のとおり
waordpress のすべての機能にアクセスできる
root みたいなかんじ

編集者は、記事の管理はすべてできるけど
管理画面で
プラグインの追加とか
ユーザ関連
設定などの権限はない

投稿者とか寄稿者とか、下に向かうにつれて
権限も縮小される

なんか、会社みたいだけど....

投稿者になると
記事の投稿のみの管理になり

寄稿者になると
自分は記事を書いても公開できない

購読者なんて
自分のプロフィールしか操作できない

wordpress でパンくずナビ

パンくずナビで
現在閲覧しているページの位置を階層化し
ユーザにわかりやすく表示して
上位階層のページに異同しやすくすること
ができる

wordpress では
このパンくずナビを
Prime Strategy Bread Crumb
で簡単に設定できます

ダッシュボード > インストール済みプラグイン
Prime Strategy Bread Crumb
の有効化を行います

そして、header.php へソースを記述します

このとき使う関数は
bread_crumb()
パンくずナビを出力
パラメータに出力全体を囲む要素として
navタグを使う
navタグのID部分には
bread-crumb を指定する

次に
function_exists()
これは
bread_crumb() が使えるかチェックする関数

wordpress サイトマップ作成プラグイン

wordpress でサイトマップを作成するには
プラグインの
PS Auto Sitemap を有効化すると楽にできます

ダッシュボードで
プラグイン > インストール済みのプラグイン
で
PS Auto Sitemap
を有効化し

ダッシュボードの
設定 > PS Auto Sitemap
で設定画面がでるので
ここで設定を行います

設定するには
記事IDが必要なので、
あらかじめ
固定ページの設置したいページで
編集を選択すると
http://192.168.10.220/wordpress/wp-admin/post.php?post=64&action=edit
というように
post= のところに
記事IDがでるので、これを使います

設定する項目は
サイトマップを表示する記事
のところの欄になります

設定をすませると
画面の一番下へ
<!-- SITEMAP CONTENT REPLACE POINT -->
というようにでるので、これを
サイトマップを表示したいページへコピペします

wordpress のパスワード忘れの対処

管理ユーザでログインできるなら

ダッシュボード > ユーザ > ユーザ一覧
でパスワードを変更したいユーザをクリック

新しいパスワードを設定する項目があるので
再設定すれば反映されます

もし、管理ユーザのパスワードも忘れているなら
パスワードをお忘れですか？
をクリックして
メールアドレスを入力すれば
新しいパスワードがメールで送られてきます

ただし、自宅サーバーの場合は
メールサーバーを構築しているのが前提となります

All in One Sub Navi Widget

All in One Sub Navi Widget は
サブナビゲーションウィジェットを管理する
wordpress のプラグイン

一般的な企業サイトにはよくあるけど
wordpress には
サブナビゲーションを管理する機能がないので
このプラグインをつかう

使い方は
プラグイン　＞　インストール済みプラグイン
All in One Sub Navi Widget
を有効化

ソースコードを記述して
ウィジェットエリアを有効にする

このときに使われる関数のメモ
register_sidebar()
ウィジェットエリアの登録

各パラメータの意味は

name
ウィジェットエリアのなめ
管理画面上で表示される

id
ウィジェットエリアのID
テンプレの中に
dynamic_sidebar()
を記述して、ウィジェットを出力するときに
ウィジェットエリアを特定するのに使う

description
ウィジェットエリアの説明
アプリ開発とかやると
よく、この項目があるけど
基本的には説明になる

before_widget / after_widget
ウィジェットの前後に出力されるHTMLのこと
%1$s はウィジェットの名前
%2$s はクラス名に置き換えされる

before_title / after_title
ウィジェットが種流よくするタイトルの前後に出力される
HTMLのこと

作成完了後に
ダッシュボードに戻り
外観 > ウィジェットを選択すると
ウィジェット管理ができるようになっている

あとは、サブナビを編集して保存

sidebar.php へ
dynamic_sidebar()
を追記する

dynamic_sidebar() はウィジェットを出力する
wordpress のテンプレタグ
（）の中には
出力させたいウィジェットエリアのIDを設定する

wordpress コミュニティ

Linux や Android Facebook でのコミュニティが
あるようにWordpress にもコミュニティがあります

こういったコミュニティに参加することで
情報を入手したり、わからないことを教えてもらうことも
できます

http://japan.wordcamp.org/

http://wordbench.org/

http://ja.forums.wordpress.org/
などがあります

wordpress お問い合わせ作成プラグイン

http://contactform7.com/?lang=ja
に
Contact Form 7
の公式サイトがある

これは、簡単にお問い合わせを作成できるプラグイン

使い方は
インストール済みのプラグインの中から
Contact Form 7
を探して
有効化

有効化すると、設定がクリックできるので
設定をクリックすると

[contact-form-7 id="105" title="コンタクトフォーム 1"]
というようにコードをコピペするようにでるので

あとはこのコードをコピペするだけ

一番上なら一番上
一番下なら一番下へ
お問い合わせフォームが作成される

HTMLでコードを打たなくてよいのでとても楽

wordpress のフックについて

フックとは
ある関数を
特定のタイミングで呼び出すためのもの

フィルターフック
と
アクションフック
がある

フィルターフックは
add_filter()
で関数を登録し

アクションフックは
add_action()
で関数を登録する

フィルターフックは
URL文字列の変更とかのように
主に文字列の変更をするときに使う
文字列の変更は
呼び出された関数が
return で戻す返り値を用いて行われる

アクションフックは
HTMLの
<head>
の中を出力するタイミングで
追加のメタタグを出力する用途で使う
フィルターフックとの違いは
文字列の変更などをしないこと

wordpress plugin Child Pages Shortcode

Child Pages Shortcode は
子ページ一覧を
ショートコードを使って出力するプラグイン

プラグインを有効化したあとに本文に
[child_pages]
というコードをいれて使う

[ は HTMLの< と同じタグのようなかんじ

属性を指定してカスタマイズも可能

id
親ページのID
デフォルトは、ショートコードを入力した固定ページのID

width
出力される各ブロックの横幅
デフォルトは５０％、つまり２カラム

size
画像サイズを名前で指定する
デフォルトは thumbnail
large
medium
とかも選択できる


ショートコードの基本的な書式は
自己完結型と
囲み型

自己完結型の書式は
[ショートコード名 属性=値]


囲み型の書式は
[ショートコード名 属性=値]content[/ショートコード名]

HTMLを使っているなら
囲み型のほうが馴染みやすいかも

GoogleMapでマーカー表示

Google mapでマーカー表示

GoogleMapでは、複数のマーカー表示が可能

ただし、今回は、ひとつだけ

マーカー表示は
google.maps.Marker()
を使う

newでMarkerオブジェクトを作成し
google.maps.Marker()の
パラメータはJavascriptのオブジェクト形式で指定する

このパラメータのうち、最低限必要なのは

position
マーカー表示する緯度経度

map
マーカー表示をするマップオブジェクト

ソースにすると
marker = new google.maps.Marker({
position: currentPosition,
map: map
});


ただ、これだとナビとかみたいに移動すると
どんどんマーカーが増える

このため、不要なマーカーは削除する
マーカーの削除は
setMap()へnullを設定する

ただし、マーカーが表示されてないときに
nullを設定するとエラーとなるので
if(marker){
marker.setMap(null);
}

というように、条件で判定するようにしておく

vim の操作 :u で戻したものを戻すには

vim の操作をするときに
:u とすれば
前の状態に戻すことができます

いわば、なかったことにできるのですが
問題は、これを連打してしまうと、どんどん古い状態に戻ってしまいます

ということで
:u
の操作から1つ前に戻す方法です

Ctrl + r
これで１つ新しい状態へ戻ります

ちなみに、これも連打するとどんどん新しい状態へと戻ります

参考サイトは
vi・vimUNDO（元に戻す）・REDO（元に戻したものを戻す）
です

wordpress のパラメータ

wordpress のパラメータのメモです

posts_per_page=-1
全件

post_type=page
固定ページを対象にする

orderby=menu_order
並べ替えの基準を
固定ページの順序にする

order=asc
並べ替えを昇順にする

post_parent=72
親ページのIDが72である子ページを対象にする

ほかにもないか、調べてみました

query_posts で指定できるパラメーター
にいろいろな例が載っているので
今後のサイトつくりにいろいろなパラメータを使ってみようと思います

wordpress でつまづいたこと

本格ビジネスサイトを作りながら学ぶ WordPressの教科書
を参考に、
１１０Pで本来なら、ページの確認をトップページ画面を読み込むのですが
モール開発記事の内容IDをソースコードに記述していたため
モール開発記事の内容がいくらやってもでないことに悩みました

まぁ結果としては思い込みなのですが
かなり悩みました

この本には、Q＆Aページがありますので
次回はこちらも参考にしてみます

『WordPressの教科書』FAQ