SSブログ

 WordPressのウィジェットの中でショートコードを使う [WordPress]

久しぶりに更新。
最近、wordpressのショートコードをよく使うようになりました。
で、ぶつかった問題がウィジェット内ではショートコードが使えないということ。 でも、解決は簡単でした。 functions.phpに以下のフィルターを追加すればOK。

add_filter('widget_text', 'do_shortcode');


これでウィジェット内でも自由にショートコードが使えるようになります。

nice!(0)  コメント(0) 

WordPressのビジュアルリッチエディターにテーマのCSSを適用するのが簡単に! [WordPress]

以前の記事でfunctions.phpに関数を追加することでビジュアルリッチエディタ(TinyMCE)にテーマのスタイルを適用する方法を書きました。

しかし、先日のTiny MCE Advancedというプラグインのアップデートでその必要がなくなってしまいました!有効なのはTiny MCE Advanced 3.3.9.2 というバージョン以降です。

具体的な内容ですが、テーマフォルダー内に「editor-style.css」というファイルを置いておくとそれを読み込んでくれる機能が実装されました。

以前はプラグインフォルダ内にあるtadv-mce.cssを参照していたので、Tiny MCE Advancedをアップデートする度に上書きされてしまうという困った仕様だったので色々工夫する必要がありました。とてもナイスな改善です。

ただ、インストールしただけではこの機能は有効になりません。Tiny MCE Advancedの設定画面の下の方にある「Advanced Options」にある「Import editor-style.css」にチェックを入れてください。


TinyMCEAdvanced.jpg

この機能を使うと簡単にエディタにもスタイルが適用できるので編集作業がより直感的に行えるようになりますね。

テーマのスタイルシートとエディタ用のスタイルシートを両方とも管理する必要はありますが・・・


WordPressのデータペースをバックアップするプラグイン [WordPress]

ワードプレスで書いた記事はサーバーのデータベースに保存されます。
なので、もしサーバーにトラブルがあった場合、今まで書いた記事が全て無くなってしまいます。

そうならないためにも定期的にデータのバックアップは取るべきです。しかし手動ではめんどくさいですね。今回は自動で定期的にデータのバックアップをメールで送ってくれるプラグインの紹介です。

WP-DBManager

今回紹介するプラグインはWP-DBManagerです。

インストールはすこしイレギュラーなところがあるので解説していきます。

まず、プラグイン→新規追加で「WP-DBManager」を検索します。そして他のプラグインと同じようにインストールして有効化しましょう。

無事有効化されるとダッシュボードに下図のような警告が表示されます。


WP-DBManager-1.jpg

WP-DBManagerはbackup-dbというフォルダを自動的に作り、そこに最新のバックアップファイルを保存します。

デフォルトではbackup-dbフォルダが外部から自由にアクセスできる状態になっているのでセキュリティ上よろしくありません。誰かに簡単にデータを盗まれてしまう可能性があります。

ということで、その警告と解決方法が表示されるようになっているんですね。

この表示を消すにはFTPソフトを使って作業する必要があります。

作業手順

  1. FTPソフトでプラグインが入っているフォルダを開き、さらにwp-dbmanagerフォルダを開く
  2. wp-dbmanagerフォルダの中にある「htaccess.txt」というファイルを探す
  3. 「htaccess.txt」をwp-contentフォルダの中にあるbackup-dbというフォルダに移動
    WP-DBManager-3.jpg  
  4. 移動後の「htaccess.txt」のファイル名を「.htaccess」に変更する

「htaccess.txt」の名前を「.htaccess」にすると画面から消えてしまう場合場あります。

でも、心配しないでください。

これは使っているFTPソフトが“.”(ピリオド)ではじまるファイル名を表示しない設定になっているだけです。

無事に名前が変更できていれば、Wordpressの管理画面をリロードすると警告は表示されなくなっているはずです。もし、まだ警告が消えなければ間違った作業をしているのでもう一度よく確認しましょう。

設定方法

インストールすると左側のメニューに「Database」という項目が追加されます。


WP-DBManager-4.jpg

ここでいろいろ設定できるようですが、僕はデータベースに詳しくないのでデフォルトの設定で使っています。

まず、「Backup DB」とう項目を見ましょう。ここを見るとWP-DBManagerが正常に動作しているかわかります。下図のようにグリーンで「Excellent. You Are Good To Go.」と出てれば問題なしです。


WP-DBManager-5.jpg

もし赤字で警告が出ていると・・・サーバーに詳しくないとやっかいです。権限やmysqlのパスに問題があると思います。僕の経験ではXサーバー・さくらサーバー・ロリポップでは問題有りませんでしたがXERAは赤字がでました。XERAでの設定は結局わからないままです・・・。XERAはパフォーマンスにも問題があると感じたのですぐに使うのを辞めてしまいました。

「DB Options」という項目を見ます。

ここの画面の一番下に「Autmatic Shceduling」という項目があり、ここの「Automatic Backing Up Of DB:」で設定の確認ができます。


WP-DBManager-6.jpg

バックアップをとる間隔、データをzip圧縮するかどうか、バックアップを送るメールアドレスが設定できます。僕は基本的にデフォルトで使っています。

データベースの最適化も自動でやってくれるようですね。

ちなみにバックアップされるデータの復旧はphpMyAdminでインポートすればOKです。

ただ、記事中の画像に関してはバックアップが取れないので気をつけましょう。これは自分でやるしかないです。

僕は自分のPCのアップロード専用フォルダに画像を保存してからアップロードするようにしています。そうすると画像が一つのフォルダーに入っているので万が一に時にも復旧しやすいかなと。

ご参考までに。


更新した投稿とページを表示するウィジェットーRecently Updated Pages [WordPress]

WordPress標準の「最近の投稿」ウィジェットはお手軽ですが2点不満があります。

一つ目は更新した日付が表示されないこと。
もう一つはページの追加・更新や投稿の更新は表示されない点です。

で、れこを実現する方法は無いと思っていると素晴らしい
プラグインがありました。

Recently Updated Pages

というプラグインです。

インストールはプラグインの新規追加から検索して可能なので簡単♪
プラグインのインストールが成功するとウィジェットに図のように
Recently Updated Pagesが出てきます。

RecentlyUpdatedPages-1.jpg    

これを「最近の投稿」と交換すればOK。

細かい設定は下図のようになります。
RecentlyUpdatedPages-2.jpg 

ややこしいのは日付の設定ですが、下にフォーマットの説明も書いてます(英語ですが・・・)

例えば11年02月14日という風に表示したければ図のように書けばOKです。

実際のサイトでは次のように表示されます。

RecentlyUpdatedPages-3.jpg 

onを表示を変えたい場合はプラグインのソースを触る必要がありそうです。
とはいえ、時間がないのでこれ以上は踏み込んでません。
まぁ、これで十分でしょう。

★参考にした記事




WordPressでリンクの順番を変更するプラグイン My Link Order [WordPress]

WordPressではブログロールの順番が自分の思うようにコントロールできません。

自作テンプレートの場合は、wp_list_bookmarksタグを使ってリストを出力するのですが、
ID順や名前順などでソートできるものの思った通りの順番にするのは難しいです。

それをあっさりと解決してくれるのがMy Link Orderというプラグイン。

導入は「プラグイン」->「新規追加」の画面でキーワード「My Link Order」で検索すれば出てきます。

あとはインストールして有効化するだけ・・・ではダメなんですねこれが。

まずインストールが完了するとサイドメニューに図のようなメニューが追加されます。

addmylinkorder.jpg

このメニューをクリックするとMy Link Orderの管理画面が出てきます。

mylinkorder-edit1.png

ここではカテゴリーの順番をドラッグ&ドロップで変更できます。

リンクの順番を変更するには、上の段でカテゴリーを選んでから「Order Links in this Category」をクリックします。

そうすると下図のような画面が出てきます。

mylinkorder-edit2.png

リンクのタイトルをドラッグ&ドロップで移動させることで順番を変更できます。

直感的にリンクの順番が変更できるのでかなり便利です。

しかし、これだけではサイトのリンク集に何も反映されませんのでご注意を!

★サイドバーのウィジェットを使っている場合

この場合はデフォルトのリンクの代わりに「My Link Order」というウィジェットを使います。

ウィジェットの管理画面に移動して「リンク」を外して「My Link Order」を入れましょう。


mylinkorderwidget.png  

そのウィジェット内でMy Orderを選ぶとMy Link Orderの設定画面で設定した順番に出てきてくれます。

★テンプレートタグを使っている場合

オリジナルのテンプレートでwp_list_bookmarksタグを使って表示させている場合はパラメータの指定を変更する必要があります。

具体的には

カテゴリーのソート項目を定義しているcategory_orderbyにorderを指定、

リンクのソート項目を定義しているorderbyにorderを指定します。

書き方の例として自分のサイトではこんな風に書いてます。

wp_list_bookmarks('title_before=&title_after=&category_orderby=order&orderby=order&

show_description=1&between=<br />')

My Link Orderはリンクの見せ方の自由度がとても高くなるので、
オススメのプラグインですよ。


YahooブログのRSS所得で日付が表示されない [WordPress]

お知らせ
この記事は YahooブログのRSS所得で日付が表示されない|WordPress整体院へ引っ越しました。

今のサイトではMagpie RSSを使ってブログのRSSを所得できるようにしています。

 アメブロやseesaaブログからは問題無かったのですが、今回友人のサイトにこれを設置したところ日付が“1969年12月31日”になってしまうトラブルに見舞われました。

ヤフーではRSS2.0、RSS1.0、RSS0.91の3種類選べるのですがすべてダメ(泣)

いろいろ調べてみると、日付がうまく所得できていない場合に“1970年01月01日”のように表示されるということが判明しました。

今回の日付は1日違いなのでこれも謎なのですが・・・
日付の所得がうまくできていないことは確かなようです。

小一時間ほど悩んだのですが下記のサイトの方法を試すとうまく表示できるようになりました!

Magpie RSS RSSフィードで日付取得できない

具体的には日付を所得するところで

 <?php echo date('Y年m月d日',parse_w3cdtf($item['dc']['date']))?>

だったところを

<?php echo date('Y年m月d日',strtotime($item[pubdate]))?>

 としました。

他のブログから所得したRSSだと

<?php echo $item['dc']['date']; ?>

と書くと日付が表示されるのですがYahooブログの場合は何も表示されません。

しかし、両者のRSSのソースを見ると日付はどちらも<pubDate>に書かれてて差が見あたらなかったんですよね…

RSSやPHPのことをもっと勉強しないと解明できそうにないかな、これは。

なにはともあれこれで解決できるのでもしお悩みの人がいたら参考にしてみて下さい。

ちなみに、strtotimeは英文形式の日時をUNIXタイムスタンプに変換する関数です。

WordPressのビジュアルリッチエディターにテーマのCSSを適用する [WordPress]

ビジュアルリッチエディターにオリジナルのテーマのCSSが適用できるとページ作りもイメージしやすくなります。

まぁ、自分で使うぶんにはそれほど気にならないですが、ホームページを作ったお客さんにとってはやはり見たとおりのページができるのが理想ですよね。

 いつも使っているTinyMCE AdvancedというプラグインではテーマのCSSを適用する「Import the current theme CSS classes」オプションがあります。

しかし、複雑な構造のテーマ用のCSSをbodyしかないビジュアルリッチエディターの編集画面に適用されるといろいろと不都合があるんですよね…

例えばbodyに背景画像を設定して、その上に背景色白を設定した<dvi>を置いてそこに本文を表示、という構造にしていると編集画面では背景画像だけ表示されて困るんですよね。

編集画面の互換性まで考えてCSS作るのも面倒。

プラグイン中のCSSをいじれば解決できますが、それってプラグインをアップデートした時にまた書き直す必要がありそう…

うまい方法がないかと思っているとよい記事がありました。

WordPressのリッチエディタにCSSを適用する

ここに書いてある関数をfunctions.phpに書いてリッチエディタ用のCSSをアップすればOK。

あ、TinyMCE Advancedの「Import the current theme CSS classes」オプションをオフにするのを忘れずに。

リッチエディタ用のCSSはテーマのCSSから不要なものを削って、bodyの部分だけすこし手を加えればOK。幅も決められるので、編集画面と実際のページの状態がほぼ同じになります。

これなら、詳しくない人が編集しても直感的でわかりやすくなりますね。

 

 


WordPressでlightbox風に表示するプラグイン [WordPress]

お知らせ
この記事は WordPressでlightbox風に表示するプラグイン|WordPress整体院へ引っ越しました。

前からやってみたかったlightbox風の表示。

簡単に実現できるプラグインを探してみました。

今回導入したのは大御所と思われるLightbox 2というプラグイン。

 Lightbox 2

WordPress.org プラグインページ »
プラグインの ホームページ »

 

導入は「プラグイン」->「新規追加」の画面でキーワードを「lightbox」にして検索。

あとはインストールを選んで有効化すればOKです。リンクが貼ってある画像は何もしなくてもlightbox風になります。

ちなみにバージョンは2.9.2です。WP2.9.2で特に問題なく動いてます。

 lightbox風にするプラグインは色々とありますが一番のポイントとなったのは自動でrel属性を加えてくれるところ。

僕だけならまだしも、あまりパソコンに詳しくない人でも更新できるようにと考えると自動化できる部分は自動化できないとね。自分のサイトも大量にある画像を一つ一つ編集しなおすのは大変ですし。

グループ表示もできるみたいですが、まだ試していません。

 何はともあれお手軽に導入できるのでお勧めです。

 


WordPressで画像の大きさを知るには? [WordPress]

お知らせ
この記事は WordPressで画像の大きさを知るには?|WordPress整体院へ引っ越しました。

前回で紹介した画像を表示する方法ですが、画像のサイズは不明のままでした。

まぁ、サイズが不明でもなんとかなるだろうと思っていたのですが…

IE6やIE7で初回の読み込み時にレイアウトが崩れることが判明。
再読み込みするときちんとしたレイアウトで表示してくれます。

 状況的にサイズの指定がないことが原因っぽい。

 ということでどうやったらサイズを調べられるのか探してみました。

Codexを見てもズバリの関数は無かったのですが、関数の中には画像のサイズを利用しているものがあり、その関数のソースを見ることに。

そうするとありました。名前もそのまま getimagesize という関数が。 どこて定義されているのかわかりませんが、ファイルのパスを引数に使って配列でサイズを返してくれるみたいです。

ということで前回のソースをさらに改良を加えてこんな感じしました。

function head_img($each_img,$img_alt_value,$img_path){
    if($each_img==""){
        /*何も表示しない*/
        }else{
            $img_begin='<div class="imgBox clearfix"><img src="';
            $img_path=$img_path.'/wp-content/uploads/'.$each_img;/*画像ファイルのパスを設定*/
            $img_alt='" alt="'.$img_alt_value;/*画像ファイルのAltを設定*/
            $img_size = getimagesize($img_path);/*画像の大きさを所得*/
            $img_end='" height="'.$img_size[1].'" width="780" /></div>';/*ファイルの高さのみ使用。横幅幅は固定(大きさが間違っていてもレイアウトを崩さないため)*/

        echo $img_begin.$img_path.$img_alt.$img_end;
    }
}

 

返値の配列は“横幅 高さ”の順になるようです。

今回は高さだけ利用しましたが使う場所によっては幅も利用できますね。

こんなことしたがる人が他にいるか分かりませんがご参考までに。

ちなみにIEのレイアウト崩れも解消されたと思います、多分…


WordPressでアップロードした画像を記事以外の場所に表示〜その2 [WordPress]

前回紹介した方法ですが、いろんな場所で使い回せるように関数にすることに。

その覚え書きです。

PHPはシロウトなのでいろいろと勉強しつつ次のような関数を作成。

function head_img($each_img,$img_alt_value,$img_path){
    if($each_img==""){
        /*何も表示しない*/
        }else{
            $img_begin='<img src="';
            $img_path=$img_path.'/wp-content/uploads/'.$each_img;/*画像ファイルのパスを設定*/
            $img_alt='" alt="'.$img_alt_value;/*画像ファイルのAltを設定*/
            $img_end='" width="780" />';

        echo $img_begin.$img_path.$img_alt.$img_end;
    }
}

 幅だけ指定しているのは、間違ってでかい画像をアップした時でもレイアウトが崩れないように。
まぁ、画像のアスペクト比が変わるのは目をつぶろう。

テンプレート側はこんな指定をしてあります。

<?php head_img(get_post_meta($post->ID,'トップ画像',TRUE), get_post_meta($post->ID,'トップ画像説明',TRUE),get_option('siteurl')); ?>

 ちょっと苦労したのがWordPressのインストールディレクトリの所得。

始めは bloginfo('wpurl') で行けるやん♪と思ってたらできない。

よくかんがえるとこの関数は得た値を画面に出力する関数。関数の引数に使ったり値を変数に代入したりできない。

で、Codexを見てると get_option という関数があるのを発見。これはちゃんと値を返してくれる関数なので使えそう。

パラメータはデータベースの option_name を直接参照すればOKです。

これで、記事と連動してヘッダやフッターの画像を変えることが簡単になりました。

まぁ今のところ使ってるのはヘッダーの画像だけですが…

 


この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。