WordPress メルマガ用ランダム記事一覧

WordPressの管理画面で記事を投稿する際に画像を連続挿入する方法について

このブログにレスポンシブWebデザインを採用してみた。(スマホも同じデザインで見られる!)

Amazon S3 にアップロードした動画(f4v など)をストリーミング再生する WordPress のページや投稿を簡単に作る方法

WordPress の Contact Form 7 プラグインで複数ファイルのアップロードを実験してみた

WordPress:Codestyling Localization を使って .po/.mo ファイルを編集し、プラグインの多言語化(日本語化とか)してみる

[WordPress] 管理ページの「リンク」メニューが無くなった

WordPress の投稿・固定ページを複数に分割する方法


WordPressの管理画面で記事を投稿する際に画像を連続挿入する方法について

PC 上の WordPress で記事する際、画像を挿入するには毎回アップローダのウィンドウを開く必要があります。

複数画像を連続投稿する場合には、これが非常に面倒くさいのですが、WordPress 2.8 系まではこの記事の方法で対応できていました。

しかし、2.9 系ではダメらしく、解決しないのでしばらく放置していました。

今日は、久しぶりにまた方法を探してみたら、米が好きさんが解決されていましたので、自分のサイトでも設定してみました。

見事動作しております。

忘れないように自分でもメモしておきます。

編集するのは「wp-admin/includes/media.php」ファイルです。

いじるのは2カ所。

「画像の追加」画面の表示部分を別ウィンドウにする

最初に「画像の追加」ダイアログを別ウィンドウにする方法です。

WP 2.9 の場合、366行目にメディア関係のリンクのコードが書かれています。
この部分を、別ウィンドウで表示するように JavaScript を追加します。

元の「画像の追加」ウィンドウ表示用のコードがこれです。

<a href="{$image_upload_iframe_src}&amp;amp;TB_iframe=true" id="add_image" class="thickbox" title='$image_title' onclick="return false;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

その下にでも、新しくウィンドウを開く様に JavaScript を追加したコードを追加します。
書き換えても良いでしょう。

<a href="javascript:w=window.open('{$image_upload_iframe_src}','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;"><img src='images/media-button-image.gif' alt='$image_title' /></a>

画像挿入後にウィンドウを閉じない

続いて、別ウィンドウで開いたウィンドウが、画像挿入後に閉じないようにするため、exit している PHP のコードをコメントアウトします。

WP 2.9 の場合、169行目です。

<a <?php
  //exit;
}

※コメントアウトした状態のソースです

以上です。
すばらしい情報をありがとうございます。

このブログにレスポンシブWebデザインを採用してみた。(スマホも同じデザインで見られる!)

同じテーマでブログを続けてきましたが、少々飽きてきたし、スマホの保有率も増えたので、デザインを変更したくなってしまいました。
こんな感じで簡単にテーマを入れ替えられるWordPressはやはり便利ですね。
毎日、違ったデザインも可能なレベルです。

ということで今回、レスポンシブWebデザインのテーマを採用しました。

レスポンシブWebデザインとは

詳しくはこちらへ

つまり、画面サイズが違う状態(PCやスマホやタブレット)でも、自動的に見やすくしてくれる方法です。

WordPressでは簡単にレスポンシブWebデザインが採用できます。

現在無料や有料で数多くのレスポンシブWebデザイン対応のテーマが配布してあります。
それを適用するだけでOKです。

画面例

PCで確認
スクリーンショット_060614_033312_PM

スマフォで確認(ブラウザの横幅を変えると自動的にスマホ版のデザインになります。)

スクリーンショット_060614_033425_PM

(1) メニューが小さくなります。3本の線の部分をクリックすると

スクリーンショット_060614_033505_PM

(1) メニューが表示されます。

スクリーンショット_060614_033836_PM

(1)検索をする
(2) 検索窓が表示されます。

※ 各テーマによって動きが異なりますので、それぞれ使いやすいテーマを選択してください。

Amazon S3 にアップロードした動画(f4v など)をストリーミング再生する WordPress のページや投稿を簡単に作る方法

Amazon のクラウド ストレージ サービスである Amazon S3 にアップロードした動画(f4v など)を、WordPress のページや投稿の中で再生する簡単な方法についてのメモです。

概要

大まかな流れとしては、作成した動画をまず Amazon S3 にアップロードし、それを WordPress の Hana Flv Player で再生する設定を行う、と言うものです。

Amazon S3 の設定

Amazon S3 Management Console での設定

Amazon S3 Management Console での設定

予め Amazon S3 上に Bucket を作成し、動画ファイルを適当なフォルダーを作成してアップロードしておきます。
※Amazon S3 の Bucket とは、ファイルシステムで言えばルートディレクトリの様なものです

  1. アップロードした動画を選択します
  2. 「Propaties」をクリックし、ファイルのプロパティを表示させます
  3. 「Link」を確認します(アクセスする URL になるのでコピーしておきます)
  4. 「Permissions」で「Everyone」の「Open/Download」にチェックを入れます

WordPress の設定

Hana Flv Player を利用する

Hana Flv Player を利用する

予め WordPress に Hana Flv Player プラグイン をインストールしておきます。

  1. 「固定ページ|新規追加」メニューを選択します
  2. 「Hana Flv」ツールボタンをクリックします
  3. ダイアログの「Video」に、先の手順でコピーした「Link」の URL をペーストします

※「投稿」でも同じ手順です

表示

作成した Hana Flv Player で再生するページ

作成した Hana Flv Player で再生するページ

図の様に、問題無く Amazon S3 上にアップロードした動画をストリーミングしながら再生しています。

まとめ

Amazon S3 が出た当初は、使い勝手が決して良いとは言えず、ファイルのアップロードだけでも様々なツールを利用しなければなりませんでした。

現在では、全ての作業をブラウザベースで済ませられるぐらい簡単になったので、ちょっと感動するぐらいですね。

S3 自体非常に安価なクラウド ストレージ サービスですので、有料の動画コンテンツだけでなく、ちょっとしたプロモーションビデオなどもこれで使えそうですね。

WordPress の Contact Form 7 プラグインで複数ファイルのアップロードを実験してみた

プロが教える WordPress セミナー開催中!

背景

WordPress でお問い合わせ機能を実装するのに定番と言える Contact Form 7 プラグインですが、いつからか複数ファイルの添付をサポートしていたようです(昔から?)。

と言う事で、質問されたこともあって複数ファイルのアップロードを実験してみました。

手順

  1. 「お問い合わせ」メニューを開く
  2. 「新規追加」ボタンをクリックする
  3. 「フォーム」に「[file file-a]」「[file file-b]」「[file file-c]」と「[submit “送信”]」を記述する
    Contact Form 7 複数ファイルの添付
  4. 「メール」の「ファイル添付」に「[file-a]」「[file-b]」「[file-c]」を記述する
    Contact Form 7 複数ファイルの添付
  5. 「保存」ボタンをクリックする
  6. ショートコードを投稿や固定ページに記述する
  7. 確認する!

フォームに記述した「[file file-a]」とファイル添付に記述した「[file-a]」が対応するわけですね。
この例では3つのファイルが添付できます。

問題無く動作しました。

まとめ

とても簡単にメール添付できる機能を実装できました。
実際これをプログラムで組むとなると、マルチパートやエンコードをきちんと考慮しなければなりません。
様々な環境で動作させることを考えると、素晴らしいですね。作者に感謝です。

ちなみにバージョン3.5からはサーバーのローカルファイルも添付できるようになっているようです。
管理等々での用途にも考えられ、応用範囲が広くなりますね。

WordPress:Codestyling Localization を使って .po/.mo ファイルを編集し、プラグインの多言語化(日本語化とか)してみる

WordPress は元々多言語対応していますが、その仕組みとして各言語に対応した .po/.mo ファイルを作成ないしは編集しなければなりません。

これらのファイルはテキストなので、基本的にはエディタがあれば可能です。
しかし、作成後にサイトにアップロード、検証と言う流れはだんだんと面倒になってきます。

と思っていたら、Codestyling Localization と言う管理画面上で直接 .po/.mo ファイルを編集できるプラグインを見つけました。

*

早速導入して .po/.mo ファイルを作成してみたのですが、認識されます。

調べてみると、wp-content/plugins/*/languages に確かにファイルは作成されているのですが、言語を表す表記が「ja_JP」となっているんですね。

この表記は本則ですが、WordPress 日本語版では /wp-config.php で次の様に設定されているため、プラグインの日本語化が行われません。

define (‘WPLANG’, ‘ja’);

*

とりあえず指定を次の様にすればプラグインの日本語化は行われますが、今度は WordPress 本体が元言語(英語)になってしまいます。

define (‘WPLANG’, ‘ja_JP’);

対応策としては、上記の設定後、wp-content/languages にある「ja.po/ja.mo」ファイルなどの名前を、「ja_JP.po/ja_JP.mo」に変更してあげれば良さそうです。

[WordPress] 管理ページの「リンク」メニューが無くなった

バージョン 3.5 以降にアップグレードした場合に発生する症状です。
というか、WordPressの仕様変更がありました。

以下抜粋記事です。
————————————————————————————————————————–
バージョン 3.5 から、リンクマネージャーおよびブログロールは新規インストールでは非表示になりました。旧バージョンからのコアアップグレードであっても、リンク集がデフォルトの状態のままになっていた場合は非表示となります。強制的にリンクマネージャー画面を表示したい場合は Links Manager プラグインをインストールできます。
————————————————————————————————————————–

つまり、アップグレード前から使ってれば、そのまま表示するけど、リンク機能が初期状態だったら非表示にしちゃうよってことです。

今後、新規インストールの場合はリンク機能は無効の状態ということですので、再インストールやサーバ移行の際には注意しましょう。

WordPress の投稿・固定ページを複数に分割する方法

WordPress の投稿や固定ページを書いていると、複数のページに分けたい事があります。
しかし、1ページ書くために、投稿や固定ページを分けるのも少々メンドクサイですね。

そんな時は、WordPress が持っているクイックタグを使うと簡単に分割できます。

<!--nextpage-- >

これを使って次の様なソースを書くと、

最初のページ
<!--nextpage-- >
2ページ目
<!--nextpage-- >
3ページ目

次の図の様にページの分割が行われ、ページング用のリンクが表示されます。
※Twenty Eleven のテーマの場合

投稿・固定ページの分割例

投稿・固定ページの分割例

リンクが表示されない場合

テーマによってはページ分割のリンクが自動的に表示されない(対応していない)場合もありますが、
その場合には次のテンプレートタグを利用すれば良いでしょう。

< ?php wp_link_pages(); ?>

詳細は、本掲載とのテンプレートタグ/wp link pagesを参照してください。

wp_link_pages() に引数を与えることで、リンクの表示をカスタマイズすることができます。

自分でリンク指定する方法

wp_link_pages() ではリンクに自由なテキストを指定することができません。

しかし、このページングの実現方法は、元の投稿や固定ページの URL の最後に「/XX」(XX にはページの番号)が付くだけですので、
a タグを使ってページの href 属性の URL の最後に「/2」などの連番を指定することで、可能です。

デザインを入れれば、もっとメニューっぽくすることができるでしょう。

< a href="http://domain/path/to/permalink" >最初のページへ< /a >
< a href="http://domain/path/to/permalink/2" >2ページ目へ< /a >
< a href="http://domain/path/to/permalink/3" >3ページ目へ< /a >

例) a タグでのリンクメニュー

注意点

エディタがビジュアルモードの場合は html タグが使えないので、HTML モードで記述しましょう。
wp_link_pages() は PHP のコードですので、使う場合には記事・固定ページ内で PHP を実行できるプラグイン(ExecPHP など)を利用しましょう。

あなたの IT の疑問・不安をすべて解決するコンシェルジュ サービス