Archive for the 'wordpress' Category

17 12月WordPress3.5の画像追加方法

WordPress3.5では写真などの画像ファイルをまとめてアップロードする機能が追加されました。

1. メディア追加の方法
2. 赤枠の「メディアを追加」ボタンをクリック

新規投稿を追加 ‹ おいでませ健康ランド — WordPress-100122

3.画像のようなウインドウが開くので、中央部の「ファイルを選択」ボタンをクリック
新規投稿を追加 ‹ おいでませ健康ランド — WordPress-100145
3. ファイルの選択画面がひらく。ここで複数のファイルをまとめて選択可能。
4. 選択したら右下の「開く」ボタンをクリック
a

5. 選択した画像すべてがサーバーにアップロードされます。
6. 次に右したの「添付ファイルの表示設定」で画像をどういった状態で表示するか選択します。
※「リンク先」の設定項目(画像をクリックしたときの動作を設定できます。)
・カスタムURL・・・自由にリンク先を設定できます
・添付ファイルのページ・・・画像ファイルのあるページをリンク先に設定します
・メディアのURL・・・画像本体へのリンクです。
(アップロードするファイルがPDFなどでリンクをクリック後ファイルを開く必要があり場合はこれを選択します。)
・なし・・・画像にリンクは張られません。

7. 一度にアップロードした画像の中から、2枚のみ、3枚のみページに掲載といった使い方も可能です。
この場合、キーボードのシフトボタンを押しながら掲載したい画像上をクリックすると、複数選択が可能となります。
新規投稿を追加 - おいでませ健康ランド - WordPress

7.すでにアップロードされている画像から表示する画像を選択する場合は赤枠の「メディアライブラリ」のタブをクリックして表示する画像を選択してください。

2 - WordPress

29 11月Custom Post Type UI のまとめ カスタム投稿の設定方法

 

カスタム投稿を使ったページを作るときに、いろいろと時間がかかったので防備録とまとめ。
ワードプレスでは通常のブログとは別に「カスタム投稿」という「ブログ内に別の独立したブログを設置」できる機能があります。

「Custom Post Type UI」というプラグインを利用することで簡単に「カスタム投稿」の利用はできますが、設定にちょっと癖があるのでまとめておきます。

今回は通常のブログの他に、「企業紹介」というコーナーをカスタム投稿で設定します。
【カスタム投稿の設定方法】
1.Custom Post Type UI をインストール

2.Custom Post Type UI 「Add New」にアクセス

3.投稿タイプ名に「company」(ここはアルファベット)、ラベルに「企業紹介」(この部分がページ上に表示されます。)と入力

4.赤枠の「Advanced Options」をクリックして「Has Archive」をTrueに設定。
※Custom Post Type UIにはカスタム投稿のアーカイブ(一覧表示)をする機能があります。この機能を使用するには「4」の設定が必要です。

 

これで設定完了です。
ダッシュボードの左メニューに「企業紹介」のリンクができていると思います。

カスタム投稿の一覧表示を確認するのは下のように入力します。
http:// ドメイン/company/ ← 今回投稿タイプ名に「company」と設定しているので。
つづいてカスタム分類の設定方法です。

【カスタム分類の設定方法】

1.Custom Post Type UI のAdd New」にアクセス

2.右側の「分類名」に「company_cat」、ラベルに「企業紹介カテゴリー」と入力。

3.「Advanced Options」を開き「階層」にtrueを設定します。
※「階層」にtrueを設定しないと入力したデータはタグの扱いになります。
【カスタム投稿の表示方法】

1.トップページにカスタム投稿へのリンクを設置する方法です。今回は「外観」の中にある「メニュー」を使います。

2.メニュー にアクセスし、「カスタムリンク」に「http:// ドメイン/company/ 」と設定します。

3.このままデフォルトの場合、「archive.php」というテンプレートを使い、データが表示されます。

4.一覧表示をデフォルトとも違うものにしたい場合はテンプレート内に「archive-company.php」という名前のテンプレートを設置します。(後は自動的にシステムがそちらのファイルを参照するようになります。)

5.同様にシングル表示も専用に変更したい場合は「single-company.php」というテンプレートを作成します。(後は自動的にシステムがそちらのファイルを参照するようになります。)

【カスタム分類の表示方法】

1.まずカスタム分類に通常と同様カテゴリーを入力します。

2.トップページへの表示方法はこんな感じ
<?php wp_list_categories(‘taxonomy=company&orderby=id&title_li=’); ?>

3.一覧表示にオリジナルテンプレートを使いたい場合は「taxonomy-company.php」というテンプレートを制作します。(後は自動的にシステムがそちらのファイルを参照するようになります。)

 

12 7月wordpressの各記事にFacebookのコメント欄を設置挿入する覚えがき。

 

yahoonewsをはじめ、最近いろいろなサイトを見ると、記事の下のコメント欄にFacebookのコメント欄を引っ付けているサイトを多く見るようになりました。

↑こんな奴です。

ワードプレスなどのblogシステムにはもともとコメントシステムがありますが、時代の流れは自前のコメントシステムではなくFacebookやTwitterの「ソーシャルプラグイン」と呼ばれるこういったプラグインをつける方向です。

「ソーシャルプラグイン」をつけることにはどんなメリットがあるのでしょうか?

一番に考えられるのは、「広がり」です。
Facebookのソーシャルプラグインのコメント欄にされたコメントは、そのブログの記事内に表示される他、コメントした本人と友達のFacebookのニュースフィードにblog記事のリンクと共に表示されます。

あとはSNSの特徴通り、いいねやシェアを繰り返し記事のリンクが拡散されて行きます。
と言うことで、Facebookのコメント欄をワードプレスの各記事毎に設置する方法です。
まずは下のリンクから「Facebookソーシャルプラグイン」のページに行きます。
http://developers.facebook.com/docs/plugins/

ここで赤枠のコメントをクリック

 

 

 

下の画面が表示されたら「width」でコメント欄の左右のサイズを調整します。


「http://example.com」は後ほどwordpressのタグを挿入するのでそのままでOKです。

 

最後に「Get Code」ボタンをポチッとな!
※初めて「ソーシャルプラグイン」を使う場合はFacebookのアプリケーションIDが必要です。
アプリケーションIDの取得方法は下の「iFrame版 Facebookページ作成方法(最新版 仕様変更対応)」をご覧ください。
ワードプレスに挿入されるコードが表示されました。
プラグインのコードには「HTML5」「XFBML」のどちらかが使用できます。
今回は簡単なHTML5で設置します。

 

※HTML5はIE9以上・googlechrome・Firefoxなど対応ブラウザ出なければ表示されません。

まずは指示通り、上のテキストエリアのソースを<body>タグのすぐ後ろに挿入します。
ワードプレスのテーマの場合、多くのテーマでは「header.php」内を探してください。

次に「プラグインを表示したい場所にプラグインのコードを配置します」のコードをコピペします。

ここでみそですが、図の赤枠部分に記事のURLを取得するコード

<?php the_permalink(); ?>

を挿入します。
後はコメントを埋め込みたい部分にソースをペーストして終了です。

一般的にはindex.phpやpage.phpのワードプレスのデフォルトコメント欄の

<?php comment_form(); ?>

を探して差し替えるのが簡単でしょうか。

これで普通のワードプレスもソーシャルブログに早変わりです。

 

 

 

16 2月ワードプレスの不要コメントを一括削除するプラグイン

超便利なplug-inがあったので覚えがき

ワードプレスをしばらくほったらかしていると、spamコメントや未承認コメントが山のようにたまることがある。

一括削除する場合、phpmyadminのデータを消すなどしていたが、ちょっとだけリスクが高い

こんな時はこの「WP-Optimize」プラグインで不要なコメントを一括削除が可能!

使い方は簡単 英語プラグインなのがちょっとだけ残念だが 下の様なメニューが出るので、不要なコメントのチェックを入れて「PROCESS」ボタンを押すだけ

Remove all Post revisions

No post revisions found

Remove all auto draft posts(自動保存された下書きを削除)

1 auto draft post(s) in your database

Clean marked Spam comments(スパムコメントを削除)

No spam comments found

Clean Unapproved comments(未承認コメントを削除)

No unapproved comments found

Optimize database tables(データベースの最適化)

※使用は自己責任で行ってください。当サイトは「WP-Optimize」に関しての一切の責任は負いません

30 8月FacebookページのSSL対応ページをロリポップの共有SSLを使って作る

FacebookページのSSL対応ページをロリポップの共有SSLを使って作る

ロリポップの共有SSLを使ったFacebookページ用ワードプレスの作り方

Facebookを通常のhttp://で見ている分には問題無いが、URLが https:// となっていた場合、Facebookページが表示されない場合はある。

その場合は下記のようなページが表示される。

これはiFrameを使って作成されたFacebookページのiFrame内に表示されているものがSSLに対応していないために起こる現象で、回避するには元のページをSSL対応にするほか無い。

※SSLとは
Secure Socket Layerの略で、米Netscape社が開発したインターネット上で情報を暗号化し、送受信できるプロトコルです。サーバ⇔クライアントPC間でクレジットカード情報などの機密性の高い情報を安全にやり取りできます。

https://www.sslcerts.jp/

通常SSLを使用するにはSSL対応のサーバーにデータを設置する必要がある。
利用しているサーバーによって、SSLの対応は様々だが、ココではロリポップの共有SSLを使ってワードプレスを動かし、FacebookのSSLページに対応できるよう設定してみる。

1.ワードプレスをロリポップにインストール

2.ユーザーページから、自分のアカウントに対応している共有SSLのURLを確認する。

※例)下記のアカウントを借りて普通にワードプレスをインストールしてみた。
「http://ftown.pupu.jp/wp/」

今の状態で、下の共有SSLのURLにaccessすると、画像やCSSが読み込まれていないため、白地に文字だけのページが現れる。

https://pupu-ftown.ssl-lolipop.jp/wp/

3.「小粋空間」さんの下のプラグインをダウンロードしてワードプレスにインストール
WordPressのURLをSSLや相対URLに変更する「wp_replace_domain」プラグイン

※ワードプレスを共有SSL対応にするためには「WordPress HTTPS」と言うプラグインもあるが、「wp_replace_domain」の方が直感的でおすすめです。

あとは画像の「ドメイン設定」画面を開いて赤枠部分を入力して完了。
※http:// や https:// は必要ないので注意

これでワードプレスのSSL対応は完了です。

4.Facebook用Wordpressテンプレートをダウンロードしてテーマ設定。

5.iFrame版 Facebookページ作成方法(最新版 仕様)のページを参考にSSLページをFacebookアプリに登録して完了

以上でSSL対応Facebookページの完成です。

30 8月iFrame版 Facebookページ作成方法(最新版 仕様変更対応)

iframeアプリを作るためのデベロッパーページの仕様が変更されたようなので、最新版を解説。

Facebookページの作り方。 その3
でも書いたが、Facebookページを簡単に作成する方法として、FacebookアプリのiFrameを利用した方法が一般的である。

この方法を使うには、Facebookとは別にコンテンツを設置するためのサーバーが必要となるが、その分できることの自由度も増す。

以前FacebookiFrameアプリの作り方を紹介したが、いつの間にか仕様が変更されているようなので改めて解説しよう。

手順1.サーバーの準備
Facebookアプリで表示するコンテンツを、自分で用意したサーバー上に用意する。
今回は当ページで配布している「Facebook様wordpressテーマ」を利用したワードプレスをFacebookページ上に表示できるよう設定してゆく。

手順2.Facebookのデベロッパーページにて開発者登録を行う。

【開発者登録ページ】

https://www.facebook.com/developers/

手順3.アプリの登録

上のURLにaccessして開発者ページにログイン後、右上の「create New App」ボタンをクリック。

「NEW APP」のダイアログボックスが表示されるので

App name に任意のアプリの名前
local に「日本語」を選択
利用規約を読んだ上でチェックボックスにチェックを入れて「続行」ボタンをクリック

セキュリティー認証のダイアログボックスが表示されるので、表示されている文字を入力して「送信」ボタンをクリック

上の画面が表示されるのを確認してください。

「Select how your app integrates with Facebook」のなかの

「App on Facebook」と「Page Tab」に必要な項目を入力します
※「Website」「Mobile and Devices」は今回は使いません。
開いてしまった場合は右上の「×」マークで削除してください。

■「App on Facebook」の入力

Canvas URL: には自分のサーバーのWPをインストールしたURLを入力

Secure Canvas URL: SSL対応ページがある場合はSSL対応ページのURLをココに入力

入力例)

Canvas URL: http://ftown.pupu.jp/wp/

Secure Canvas URL: https://pupu-ftown.ssl-lolipop.jp/wp/

今回はロリポップの共有SSLを使ってSSLページを用意しています。SSLページがない場合は空白でOK

■「Page Tab」の入力

Page Tab Name:Facebookページの左メニューに表示されるタブ名を入力(任意の名前

Page Tab URL: タブがクリックされた場合iFrame内に表示されるページのURLを入力

Secure Page Tab URL:タブがクリックされた場合iFrame内に表示されるページのURLを入力(SSLページがある場合のみ)

Page Tab Edit URL:空白

設定例)

Page Tab URL:http://ftown.pupu.jp/wp/index.php

Secure Page Tab URL:https://pupu-ftown.ssl-lolipop.jp/wp/index.php

Page Tab Edit URL:空白

上記を入力後「保存」ボタンをクリックして設定を保存してください。

手順4.設定したアプリをFacebookページに関連つける

1.下記左メニューの「View App Profile Page」をクリックして設定したアプリを表示

2.画像赤枠の「自分のFacebookページのお気に入りに追加」をクリックして自分のFacebookページを表示して追加ボタンをクリック

残りは「Facebookページの作り方。 その3」を参照

これでFacebookページのいっちょあがりです

03 6月Facebookページの作り方。 その4 (WordPressを使ってFacebookページを作る方法)

■ここからはiFrameの中身のお話
(Wordpressを使ってFacebookページを作る方法)

iFrameを使ってFacebookページを作るには、別途自分でファイルを置くためのサーバーを用意する必要がある。
今までレンタルサーバーなどを使ったことがない人にとっては若干ハードルが高くなる。

1.いいねボタンのオンオフで表示されるページを切り替える

よく見かける機能だ、FBML時代は非常に簡単に実装できたが、iFrameになってからは、この機能も若干ハードルが高くなった。ただしこれに関しては、非常にいいソースが提供されている。(下記URL参照)
    http://www.facebook.com/fbml.sample?sk=app_198352453532934

上の「スタティックFBML」さんのページよりソースをダウンロードして設置しよう

2.wordpressをFacebookページで表示する。

弊社おすすめはこれである。
wordpressとは皆さんご存じの超メジャーblogツールであるが、WordpressをFacebookページに適応することで様々な機能を簡単にFacebook上で実装することが可能となる。

たとえば
1)文字や写真を思い通りに配置できる。
2)お問い合わせフォームを設置できる。
3)WordpressのRSS機能を使ってFacebookの「ノート」と同期できる
4)トップページの他、会社概要・利用規約・商品紹介など複数ページを展開できる

要するにwordpressをFacebook内に取り込むことで、Facebookで足りない機能を補完し、ビジネスを展開する上で必要な機能をすべてまかなうことができる。

設置サンプル
サンプル


【Facebook用Wordpressテンプレートのダウンロード】
下記フォームに入力していただくと、Facebook用WordpressテンプレートのダウンロードURLをお知らせします。
※無料 サポート等無いです。自己責任にて使用してください。


お名前
メールアドレス

□設置方法

1.先に説明したアプリの登録でiFrameページを作成する
 ※Facebookの仕様変更によりSSL(https)対応サーバー以外のサーバーを受け付けなくなるようです。
2.別サーバーにWordpressを設置し、iFrameアプリのcampusページにWPのURLを登録する。
3.WordpressのthemeをFacebookのサイズに合うものに変更する
 ※FacebookのiFrameの左右のサイズは初期設定は左右520px、上下800pxでサイズをはみ出した場合はスクロールバーが表示される。
 ※当ホームページ配布のFacebook用themeファイルを使用することでカスタマイズすることなく設置可能です。上のフォームよりダウンロードしてください。
4.javascriptを使用してスクロールバーがでないように設定する
 ※javascriptを使用することで、Facebook側がWordpressの記事の上下のサイズを自動取得し、その大きさに合うiFrameページを表示する
 ※この件もホームページ配布のFacebook用themeファイルを使用することで解決可能です。

ここいらのURLを参考にしてjavascriptを設置しよう

http://ascii.jp/elem/000/000/593/593097/
http://ascii.jp/elem/000/000/596/596552/
http://tam-tam.co.jp/tipsnote/javascript/post1097.html

21 4月予定に基づいたメンテナンスを行っているためしばらくの間ご利用できません。少し間をおいて再度確認してください の時の対処法

wordpressで作業中「予定に基づいたメンテナンスを行っているためしばらくの間ご利用できません。少し間をおいて再度確認してください」と

表示されたまま直らなくなった場合、FTPで接続して、 .maintenance と言うファイルを削除!

20 4月記事のタイトル、記事内容、タグから関連した記事のリンクを記事の下部に自動的に表示してくれるプラグイン

Yet Another Related Posts Plugin

記事のタイトル、記事内容、タグから関連した記事のリンクを記事の下部に自動的に表示してくれるプラグイン。

○○の記事 その1、~~その2と言った投稿がある場合、関連記事のタイトルのリンクを自動設置してくれるので非常に便利

07 4月wordpressメモリーエラーの対処(おぼえ)

Fatal error: Allowed memory size of 33554432 bytes exhausted p-includes/pomo/mo.php on line 172

 

のエラーが出たばあい、 php.iniファイルを作成し、

 

memory_limit = 64M

と書いてサーバーに放り込む

 

あとwp-settings.phpに下記を記述

define('WP_MEMORY_LIMIT', '64M');