WordPressカテゴリー記事一覧 | 2ページ目 (3ページ中)

[制作者向け] WAFが正常なJavaScriptもエラーにしてしまう場合の.htaccessによる対応方法（CPIシェアードプランACE01の場合）

WordPressやconcrete5等のCMSを使うなら絶対あったほうが良いWAF

WordPressに対する不正攻撃からサーバを守ってくれるWAF（Webアプリケーションファイアウォール）。

CPIのレンタルサーバシェアードプランACE01にはWAFが標準装備されていて、クロスサイト・スクリプティングやSQLインジェクション等のサイバー攻撃を未然に防いでくれます。

詳しくはCPIの以下のページに分かりやすい解説が載っています。

https://www.cpi.ad.jp/shared/detail/waf.html

CPIは、ジェイピー・セキュア社のSiteGuard Liteを導入しているようですね。

WAFがある安心感は非常に大きく、利用しないのはもったいない！というかWAFが使えるなら絶対に使ったほうが良い機能です。

しかしながら、WAFがしっかりと動作しすぎるために、サイト構築時に悪意のないJavaScriptもエラーになるケースも割りと多かったりします。

GoogleAnalyticsのコードをconcrete5の管理画面にペーストして保存しようとすると以下のようなエラーになり上手く保存が出来ないことも。

.htaccessでWAFの設定を変更・無効にできる

そんなときに私は、JavaScriptを貼り付けて保存する間だけ.htaccessを使ってWAFを無効化しています。

手順とは言いながら、.htaccessに以下の一行を付け加えるだけです。

SiteGuard_User_ExcludeSig all

1	SiteGuard_User_ExcludeSig all

これで、WAFを無効に出来ます。この行を削除すると有効化されます。

無効化して作業が終わったら、すぐに有効化をしましょう！

すぐに有効化をしましょう！

大事なので2回言いました。

また、ON（有効）・OFF（無効）の2択ではなくて、より柔軟にWAFの除外設定をすることも可能です。

その解説は以下のCPIスタッフブログに詳しく書かれていますのでご一読下さいませ。

知らないと怖いWebセキュリティと、CPIサーバーのWAF設定方法
http://shared-blog.kddi-web.com/webinfo/129#setting

2017年2月24日追記

あれから色々と調べていたら、以下サイトに記載されていた、IPアドレスによりWAFの除外設定をする方法がCPIでも使えました。

<IfModule mod_siteguard.c>
  SiteGuard_User_ExcludeSig ip(192.168.1.1)
</IfModule>

SiteGuard_User_ExcludeSig ip(192.168.1.1)

</IfModule>

192.168.1.1 の部分を自分のIPアドレスに変更すると、該当IPアドレスからのアクセスの場合、WAFのフィルタリングから除外されます。

【誤検知】WAFのSiteGuard Liteで閲覧をブロックされてしまった場合の除外設定の方法
http://spot-web.jp/blog/2700/

感想

WAFがサイト構築の足かせにならないように、WAFと仲良く付き合っていきたいですね。

CPI LOVEなページを作りました

4年以上愛用しているCPIの共用レンタルサーバー ACE01について、褒めたり、愛のこもった文句を言うページを作りました。CPIサーバをご検討されている方は、もし良ければこちらもご覧ください。

【WP】WordPressのPress This機能を応用して超個人的なブックマークサイトを作った話

どうも、小野です。個人的なブックマークサイトを作りました。

onocom.bookmark
http://onocom.net/bookmark/

私がネットサーフィンをする中で見つけたサイト、デザインの参考になりそうなサイト、Amazonの面白かった動画等をざっくばらんにブックマークし、後日私が活用するためのサイトです。

ブックマークをいかにしやすくするかといところに焦点をおいた結果、Press Thisという機能を活用するに致しました。

今回はこのサイトを作る過程で肝となった「Press This」という機能とそのカスタマイズ方法をご紹介致します。

WordPressのPress Thisという機能をご存知ですか？

WordPressにひっそりと佇むPress Thisという機能をご存じでしょうか？

この機能の画面を見たことはあるけど、使ったことがない！という人がほとんどなのではないでしょうか？かくいう私も全然使っていませんでした。

ちなみに、Press Thisには以下のようにアクセスします。
管理画面 → ツール → 利用可能なツール

Press Thisとは

PressThisとは、外部サイトの紹介記事など書く際に、引用等の負担を減らし、効率よく記事を書くためのツールのことです。

WordPressのCODEX日本語版には以下のような説明がされています。

Press This
「Press This」とは、Web ブラウザのブックマーク（お気に入り）を使って WordPress に素早く投稿・発信できる機能です。「Press This」を使うにはツール画面からブックマークレットを作成し、Web サイトを見ている間に引用したいテキスト、画像、動画などを見つけたら、そのブックマークレットを選択して起動します。

Press Thisの使い方

せっかくなのでPress Thisの使い方を動画にしてみました。

途中エラーになったりしていますが取り敢えずPress This、なんかの役にたちそうやなぁっていうのはご確認頂けるのではないでしょうか？

Press Thisを活用して簡単にブックマーク記事を投稿出来るサイトを作った

今回、このPress Thisの機能を使って個人的なブックマークサイトを作ったのでご紹介したいと思います。

onocom.bookmark
http://onocom.net/bookmark/

なぜこんなサイトを作ったかと言うと、Chromeのブックマークバーのブックマークが多くなりすぎて、同じサイトのブックマークを何個もしていることがあったから。そんな状況では、そもそもブックマークの意味が無い。

自分のブックマークを横断的に調べられたらいいなぁというのと、面白そうやなぁということで、こんなサイトを作りました。

はてなブックマーク使えば解決するのかもしれませんが、まぁ要するに自己満足です。

このサイトはウェブサービスでもなんでもなく、ただのWordPressのサイトを更新しやすくしただけなので、以下に書き記すことは、onocom.bookmarkの閲覧者には何のメリットももたらしません！

肝になるプログラム

このサイトの肝はPress Thisの本文からPress ThisしようとしてるサイトのURLを取得し、画面キャプチャを自動挿入しているところです。

そうすることで、ブックマークしたいURLにリンクする手間や画面キャプチャを取る手間を省き、一言コメントを入れつつブックマークする(投稿する)事が可能になります。

ブックマークするだけなのにいちいちURLをコピーして・・・なんてやってられないですからね。

それを可能にしたのは、【 press_this_save_post 】というフィルターフックです。

該当のフィルターフックを使ってPress Thisで投げられたコンテンツ（本文）を以下のように書き換えています。

また、自動で対象のサイトからメディアを取得するのを防ぐために【enable_press_this_media_discovery】フィルターフックをfalseに設定しています。

<?php
add_filter( 'enable_press_this_media_discovery', '__return_false' );
add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {
    
    $url = "";
    // 本文からURLを抽出する
    $content = trim($post_data['post_content']);
    $pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';
    $result = preg_match($pattern, $content, $match);
    
    if( $result !== 0 && $result !== false ) {
        // デフォルトの情報源という表示は消して、別の方法でリンクを表示
        $content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);
        $url = $linkurl = $match[0];
        $html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';
        
        // サイトのサムネイルをwordpress.comのサービスを利用して取得
        $html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';
        
        // 保存するコンテンツを組み立てる
        $post_data['post_content'] = $content . $html;
    }

    return $post_data;
}

<?php

add_filter( 'enable_press_this_media_discovery', '__return_false' );

add_filter( 'press_this_save_post', 'onocom_press_this_save_post', 10, 1 );

function onocom_press_this_save_post($post_data) {

$url = "";

// 本文からURLを抽出する

$content = trim($post_data['post_content']);

$pattern = '(https?://[-_.!~*\'()a-zA-Z0-9;/?:@&=+$,%#]+)';

$result = preg_match($pattern, $content, $match);

if( $result !== 0 && $result !== false ) {

// デフォルトの情報源という表示は消して、別の方法でリンクを表示

$content = preg_replace('/情報源:.*<em>.*?<\/em>/i', "", $content);

$url = $linkurl = $match[0];

$html = '<p id="url-link">サイトURL：<a href="' . $linkurl . '" target="_blank">' . $url . '</a></p>';

// サイトのサムネイルをwordpress.comのサービスを利用して取得

$html .= '<div id="url-thumbnail"><a href="' . $linkurl . '" target="_blank"><img src="http://s.wordpress.com/mshots/v1/' . urlencode(clean_url($url)) .'?w=800" alt="' . esc_attr($post_data['post_title']) . '" class="url-capture"></a></div>';

// 保存するコンテンツを組み立てる

$post_data['post_content'] = $content . $html;

}

return $post_data;

}

たったこれだけでPress Thisを使いやすくカスタマイズ出来ました。

めっちゃ簡単！

実際にブックマークする（投稿する）様子を動画にしました。

上記のカスタマイズのおかげで、簡単にブックマークを投稿できるサイトが出来上がりました。しかも画面キャプチャ付きだから、分かりやすい！

https://youtu.be/fabm28w6FKs

地味な機能を弄る喜び

Press This使っている人に出会ったことがないのですが、このブックマークサイトを作ってみて、これは何か他にも使えそうな予感がしました。

そして、誰もいじっていないであろう地味な機能をカスタマイズするっていうのは自己満足するにはピッタリでありました。

皆様も参考に頂ければ幸いです。

3分の動画で学ぶ！無料で使えるスマホ対応WordPressテーマ【Lightning】のインストール方法＆カスタマイズ

Lightning & BizVektor アドベントカレンダー３日目です！

「WordPress公式ディレクトリ登録テーマ Lightning & BizVektor 及びVektor,Inc. リリースプラグインに関するアドベントカレンダー」という、非常にニッチ(!?)なアドベントカレンダーがありまして、Lightning開発者の石川さんがブログを書く方を募集していたので飛び入りで書きます！

【WordPress Theme Lightning & BizVektor 他 Advent Calendar 2016】
http://www.adventar.org/calendars/1716

２日目の石川さんから勝手にバトンを引き継いで、３日目の今回はLightningのインストール方法とカスタマイズ方法を動画でサクッと紹介しようと思います。

動画の合計時間は約３分。忙しい方でもサッと視聴いただき、Lightningの良さを感じてもらえたら嬉しいです。

昨日(２日目)の石川さんの記事はこちら
WordPressでCTAを簡単に設置できる機能を強化！ウィジェットでも使用して集客につなげよう！

WordPress公式テーマ Lightningとは

動画を紹介する前にちょっとLightningの紹介を。

Lightningテーマは『株式会社ベクトル（Vektor,Inc.）』が提供するWordPress公式ディレクトリテーマです。

Lightning

特徴は、以下の通り。

専門知識の無い初心者でも、スマホ対応（レスポンシブ対応）したウェブサイトが簡単に作れてしまう！
オンラインで簡単に色やロゴを変えられる
推奨プラグインを入れることで、より幅広い設定が可能
Bootstrapベースのため、ウェブ制作を生業にしている方でもカスタマイズがしやすい

一言で言うと『初心者から上級者まで誰にでも使いやすく、カスタマイズし易い公式ディレクトリテーマ』です。

今回、その特徴を端的にお伝えするためにインストールからカスタマイズまでの操作動画を作ってみました。

Lightning のインストール方法

では、早速Lightningテーマのインストール方法からスタート。

なお、既にWordPressをインストールしてあるものとして話を進めます。

インストールはWordPressの管理画面から簡単に行えます。

字幕をONにすると動画下部に操作説明が表示されます。

https://www.youtube.com/watch?v=9i8y0N8iUjw?hl=ja_JP&version=3&cc_load_policy=1

Lightning のカスタマイズ

ヘッダーのロゴ、キーカラー、トップページのスライドショーを変更してみます。

ツールバーのカスタマイズから簡単に色々な変更が出来てしまうという素晴らしさ！

字幕をONにすると動画下部に操作説明が表示されます。

https://www.youtube.com/watch?v=qu8hVzkkTPo?hl=ja_JP&version=3&cc_load_policy=1

すごいぞLightning

いやぁ簡単ですね！たった３分でここまで出来るLightningテーマ！すごい！

今回は、Lightningのほんの一部のカスタマイズしか紹介していません。

他の部分のカスタマイズはぜひご自身で試してみてくださいね。

では、４日目の誰かにバトンタッチ！

【WP】［Beaver Builder － WordPressページビルダー］プラグインのカスタマイズメモ

WordPressのプラグイン「Beaver Builder－ WordPressページビルダー」が個人的に熱い

WordPressはブログツールとして発展してきた経緯もあり、長文を書くのは大変得意です。

しかし、記事をレイアウトしようとすると、途端に難易度が上がります。

コンテンツを２カラムに分けて画像を配置したり、各画像にアニメーションを適用するなどといったことをデフォルトの投稿画面で実施しようとすると、非常に難しいんですよね。

テキストモードでHTMLが書ける人なら良いかもしれませんが、そんな高度なことは制作者ぐらいしか出来ません。

じゃあconcrete5で良いじゃないか！と言われると、ブログもよく書いていたりすると、WordPressからなかなか逃れられない。

そこで最近気に入って使っているのが【Beaver Builder – WordPressページビルダー】というプラグインです。

［Beaver Builder-WordPressページビルダー］のプラグインページはこちら

Beaver Builderで何ができるのか？

どんなことができるかの説明は、きっと以下の動画を見てもらった方が早い。

要はWordPressのコンテンツエリアを見たまま直接編集できる。というプラグインです。レイアウトとモジュールという部品を組み合わせて複雑なページを簡単に実装できます。

まじで簡単だから感動した。そしてサクサク動くのも素敵。

WordPressの公式プラグインディレクトリでは、無料でlite-versionが配布されており、公式サイトより有料版を買うと、さらに多くのモジュールが追加され、より高度なページを簡単に実装できるようになるようです。

という私はまだ無料版しか使っていない(^_^;)

実際に触ってみたいという方は、公式サイトの「Try the Demo」ボタンからお試しで操作を行えます。

ちなみにしっかりと日本語の翻訳も完了しているため、私のような英語の苦手な日本人にもスムーズに操作することが出来ます。（翻訳してくださった方ありがとうございますm(_ _)m）

Beaver Builderで困ったこと

無料版だからだと思うのですが、しょっちゅう「どのテンプレートを選ぶ？」的なメッセージボックスが表示されます。もちろん無料版だし、有料版にしてほしい。という気持ちもわからないでも無いけども、ちょっと鬱陶しい。

該当の表示はJavaScriptで制御しているようで、その制御の設定をPHPで出力していました。

beaver-builder-lite-version\includes\ui-js-config.php

<script>
<?php
    
echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array(
    'ajaxNonce'                     => wp_create_nonce( 'fl_ajax_update' ),
    'colorPresets'                  => FLBuilderModel::get_color_presets(),
    'customImageSizeTitles'         => apply_filters( 'image_size_names_choose', array() ),
    'debug'                         => ( defined( 'WP_DEBUG' ) && WP_DEBUG ),
    'enabledTemplates'              => 'core',
    'help'                          => FLBuilderModel::get_help_button_settings(),
    'homeUrl'                       => home_url(),
    'isRtl'                         => is_rtl(),
    'isUserTemplate'                => false,
    'lite'                          => true === FL_BUILDER_LITE,
    'modSecFix'                     => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ),
    'newUser'                       => FLBuilderModel::is_new_user(),
    'postId'                        => $post_id,
    'postStatus'                    => get_post_status(),
    'postType'                      => get_post_type(),
    'simpleUi'                      => $simple_ui ? true : false,
    'upgradeUrl'                    => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ),
    'userCanEditGlobalTemplates'    => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ),
    'userCanPublish'                => current_user_can('publish_posts'),
    'userTemplateType'              => FLBuilderModel::get_user_template_type(),
    'googleFontsUrl'                => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family='
) ) ) . ';';

<?php

echo 'FLBuilderConfig = ' . json_encode( apply_filters('fl_builder_ui_js_config', array(

'ajaxNonce' => wp_create_nonce( 'fl_ajax_update' ),

'colorPresets' => FLBuilderModel::get_color_presets(),

'customImageSizeTitles' => apply_filters( 'image_size_names_choose', array() ),

'debug' => ( defined( 'WP_DEBUG' ) && WP_DEBUG ),

'enabledTemplates' => 'core',

'help' => FLBuilderModel::get_help_button_settings(),

'homeUrl' => home_url(),

'isRtl' => is_rtl(),

'isUserTemplate' => false,

'lite' => true === FL_BUILDER_LITE,

'modSecFix' => ( defined( 'FL_BUILDER_MODSEC_FIX' ) && FL_BUILDER_MODSEC_FIX ),

'newUser' => FLBuilderModel::is_new_user(),

'postId' => $post_id,

'postStatus' => get_post_status(),

'postType' => get_post_type(),

'simpleUi' => $simple_ui ? true : false,

'upgradeUrl' => FLBuilderModel::get_store_url( '', array( 'utm_medium' => ( true === FL_BUILDER_LITE ? 'bb-lite' : 'bb-demo' ), 'utm_source' => 'builder-ui', 'utm_campaign' => ( true === FL_BUILDER_LITE ? 'top-panel-cta' : 'demo-cta' ) ) ),

'userCanEditGlobalTemplates' => current_user_can( FLBuilderModel::get_global_templates_editing_capability() ),

'userCanPublish' => current_user_can('publish_posts'),

'userTemplateType' => FLBuilderModel::get_user_template_type(),

'googleFontsUrl' => apply_filters( 'fl_builder_google_fonts_domain', '//fonts.googleapis.com/' ) . 'css?family='

) ) ) . ';';

なんやかんやソースコードを追っていくと、上記の ‘enabledTemplates’ => ‘core’,の部分を「disabled」に変更してあげれば、該当の表示はしなくなるようでした。

丁度設定用のフィルターフック’fl_builder_ui_js_config’があったので、以下のようなフィルターを追加することで、しょっちゅう出てきたメッセージを表示させなくすることが出来ました。

// テンプレート選択画面を非表示にする
add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting');
function onocom_set_pagebuilder_setting($settings) {
    
    if( isset($settings["enabledTemplates"]) ) {
        $settings["enabledTemplates"] = "disabled";
    }
    
    return $settings;
}

// テンプレート選択画面を非表示にする

add_filter('fl_builder_ui_js_config', 'onocom_set_pagebuilder_setting');

function onocom_set_pagebuilder_setting($settings) {

if( isset($settings["enabledTemplates"]) ) {

$settings["enabledTemplates"] = "disabled";

}

return $settings;

}

ただ、この方法だと、テンプレートボタンを押しても何も反応しなくなるので要注意。

お客様に納品する際はテンプレートボタンを非表示にするCSS等を入れてあげましょう。こんな感じで動くかと。

/* ツールバーのボタン等を非表示にするCSS(多分動く) */
.fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */
.fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */
.fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */
.fl-builder-blocks .fl-builder-modules-cta   /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */
{
    display: none; 
}

/* ツールバーのボタン等を非表示にするCSS(多分動く) */

.fl-builder-bar-actions .fl-builder-templates-button, /* テンプレートボタン非表示 */

.fl-builder-bar-actions .fl-builder-upgrade-button, /* アップグレードボタン非表示 */

.fl-builder-bar-actions .fl-builder-help-button, /* ヘルプボタン非表示 */

.fl-builder-blocks .fl-builder-modules-cta /* コンテンツ追加→サイドバーに表示される公式サイトへのリンク非表示 */

{

display: none;

}

まとめ

まだまだ奥が深そうな【Beaver Builder – WordPressページビルダー】。これからも活用していきます。

[WordPress]WordPress Beta Testerプラグインを利用してWordPressの開発最新版(WordPress 4.5 RC)をテスト環境で簡単に試す方法

WordPressの最新版のVersion 4.5が4月12日頃にリリースされるそうです。開発は順調に進んでいるようです。

WordPress4.5のリリースが待てないという方はこの方法を使って先行して動作確認を行うことが出来ます。

注意

紹介している方法は必ずテスト環境でお試しください。本番サイトでこの方法を採ることはオススメしません。

WordPress Beta Tester プラグインを有効化

「WordPress Beta Tester」プラグインをインストールして、有効化します。

https://wordpress.org/plugins/wordpress-beta-tester/

WordPress Beta Tester プラグインの設定

ツール→Beta Testingをクリックして設定画面を表示します。
続いて、「最新版ナイトリービルド」をチェックして変更を保存します。
これで準備OKです。

WordPressの最新版ナイトリービルドに更新

ダッシュボード→更新をクリックしてWordPress の更新画面を開きます。

今すぐ更新をクリックしてWordPressをアップデートします。

無事にアップデートされました。

まとめ

めっちゃ簡単でしたね。

WordPressはガンガン開発が進んでいるCMSです。

開発の様子も公開されているので興味が有る方は覗いてみてくださいね。

https://make.wordpress.org/core/

WordPress 4.5でリリースされる機能の概要が以下の記事で紹介されています。

WordPress 4.5 ベータ 1

https://ja.wordpress.org/2016/02/27/wordpress-4-5-beta-1/