カスタマイズタグ記事一覧

WordPressの検索フォームのカスタマイズ！カスタムタクソノミーを検索条件に追加する方法

WordPressの検索フォームをカスタマイズしよう

WordPressの検索フォームはキーワードを入力するテキストボックスと、検索を実行する検索ボタンで構成されています。

この検索フォームにカスタムタクソノミーを指定する方法をご紹介します。

検索条件にカスタムタクソノミーを追加しよう

以下の順序で検索フォームをカスタマイズしていきます。

searchform.php をテーマフォルダに追加
searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置
検索ボックスを呼び出し

1.searchform.php をテーマフォルダに追加しよう

まずやることは、searchform.phpというファイルをテーマフォルダ内に追加することから始めます。

中身は取り敢えず空で大丈夫です。

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

searchform.php をエディタで開いて以下のように書き換えます。

タクソノミースラッグ（以下例だとpref）をご自身のサイトに付け加えてあげてください。

<?php
/* 
 * 検索ボックスのカスタマイズ
 *   カスタムタクソノミーを検索条件に追加する
 */
<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">検索キーワード</span>
        <input type="search" class="search-field" placeholder="キーワードを入力" value="<?php echo get_search_query() ?>" name="s" />
    </label>
    <label>
        <span class="screen-reader-text">都道府県で絞り込み</span>
        <?php
            $selected = get_query_var("pref",0);
            $args = array(
                        'show_option_all' => '都道府県で絞り込み',
                        'taxonomy'    => 'pref',
                        'name'        => 'pref',
                        'value_field' => 'slug',
                        'hide_empty'  => 1,
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>
    <input type="submit" class="search-submit" value="検索" />
</form>

<?php

* 検索ボックスのカスタマイズ

* カスタムタクソノミーを検索条件に追加する

<label>

<span class="screen-reader-text">検索キーワード</span>

</label>

<label>

<span class="screen-reader-text">都道府県で絞り込み</span>

<?php

$selected = get_query_var("pref",0);

$args = array(

'show_option_all' => '都道府県で絞り込み',

'taxonomy' => 'pref',

'name' => 'pref',

'value_field' => 'slug',

'hide_empty' => 1,

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

</form>

2-1. カスタムタクソノミーを複数設置したい場合

以下部分をコピーして、formタグ内に追加することで、複数のカスタムタクソノミーからのAND条件検索も行えます。

●●●・・・タクソノミーラベル（例：都道府県）
■■■・・・タクソノミーの名前[半角英数]（例：pref）

  <label>
        <span class="screen-reader-text">●●●で絞り込み</span>
        <?php
            $selected = get_query_var("■■■",0);   // 選択状態となるタクソノミースラッグを取得
            $args = array(
                        'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）
                        'taxonomy'    => '■■■',   // タクソノミーの名前
                        'name'        => '■■■',   // タクソノミーの名前
                        'value_field' => 'slug',   // タクソノミーのスラッグをセレクトボックスのオプションに設定する
                        'hide_empty'  => 1,        // 空のタクソノミーは非表示(0にすると表示)
                        'selected'    => $selected
                    );
            wp_dropdown_categories($args);
        ?>
    </label>

<label>

<span class="screen-reader-text">●●●で絞り込み</span>

<?php

$selected = get_query_var("■■■",0); // 選択状態となるタクソノミースラッグを取得

$args = array(

'show_option_all' => '●●●で絞り込み', // 何も指定しない場合のラベル（要らなければこの行削除してOK）

'taxonomy' => '■■■', // タクソノミーの名前

'name' => '■■■', // タクソノミーの名前

'value_field' => 'slug', // タクソノミーのスラッグをセレクトボックスのオプションに設定する

'hide_empty' => 1, // 空のタクソノミーは非表示(0にすると表示)

'selected' => $selected

);

wp_dropdown_categories($args);

</label>

3. カスタマイズした検索ボックスを呼び出し

検索ボックスを表示させたい箇所のテンプレート（sidebar.php等）に以下のコードを記載します。

<?php get_search_form(); ?>

1	<?php get_search_form(); ?>

これでカスタマイズした検索ボックスが表示されるはずです。

CSSの調整等はよしなにしてくださいませ。

まとめ

結構簡単に検索条件にタクソノミーを追加できた！

その他にも、特定の日付範囲内の記事を検索する。とかもやろうと思えば出来ます。その場合、上記以外にも修正が必要です。それはまた気が向いたら追記しようかな。

【concrete5】concrete5.7のカスタマイズ（スーパー管理者のこと、サブディレクトリインストール方法、記事ブロックエディタ[Redactor]のカスタマイズ、確認画面付き問い合わせフォームの作成）

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

案外情報が少なくて、concrete5の構築には割りと時間がかかりがちですが、でもそれが面白かったりするわけで。

今回、concrete5でサイトを作る際に躓いたことや小技的なものを共有するために記事にしました。

ちなみにこの記事は、concrete5 5.7.5.9 を対象に作成しています。他のバージョンでも動くかは不明ですが参考にはなるかと思います。

困った：ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

スーパー管理者：一番最初に作成されるユーザー admin ユーザのこと

一般管理者：管理者グループに属している自分で追加したユーザのこと

詳しくは、Katzさん記事が分かりやすかったです。

concrete5 で管理者が複数人いるときの豆知識
http://ja.katzueno.com/2014/11/3288/

サブディレクトリにconcrete5をインストールしてルート（/）で公開したい

やりたいこと

/ ・・・ルートディレクトリにはconcrete5をインストールせず、

/concrete5/ ・・・ concrete5ディレクトリにインストールした状態で、

http://example.com/ にアクセスしても、concrete5を読み出して表示させたい！

理由は聞かないで！そうしたいんだ！

色々と参考になるフォーラムがあったのでそれを参考に実装しました。

フォーラムを読むと、.htaccssだけでも実現可能ということも書かれていましたが、私の場合は、concrete5インストールディレクトリ直下のindex.phpを修正しないと、画像などのパスが「http://example.com/concrete5/・・・」となってしまいましたので、index.phpも修正を行いました。

参考にしたフォーラム記事

https://concrete5-japan.org/community/forums/5-7-x/post-10739/

https://concrete5-japan.org/community/forums/usage/post-2602/

ちなみに動作確認したのはCPIのACE01レンタルサーバです。

修正・作成するファイル

/.htaccess

/concrete5/.htaccess

/concrete5/index.php

/.htaccess の修正内容

ルートディレクトリ直下の.htaccessに以下のルールを記述する。
下2行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

RewriteEngine On
RewriteBase /

RewriteRule ^$ index.php [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !^concrete5/ [NC]
RewriteRule ^(.*)$ /concrete5/$1

RewriteEngine On

RewriteBase /

RewriteRule ^$ index.php [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteCond %{REQUEST_URI} !^concrete5/ [NC]

RewriteRule ^(.*)$ /concrete5/$1

/concrete5/.htaccess の修正内容

concrete5インストールディレクトリ直下の.htaccessに以下のルールを記述する。
最終行の「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /concrete5/index.php/$1 [L]

RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule ^(.*)$ /concrete5/index.php/$1 [L]

/concrete5/index.php の修正内容

concrete5インストールディレクトリ直下のindex.phpを修正する。
require(‘concrete/dispatcher.php’);よりも上に以下の4行を追加する。
それぞれ「concrete5」となっている部分は、ご自身のインストールしたディレクトリ名に書き換えること。

<?php
$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']); 
$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);
$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

<?php

$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']);

$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);

$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);

$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

追加するとこんな感じになる。

<?php
$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']); 
$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);
$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);
$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

require('concrete/dispatcher.php');

<?php

$_SERVER['REDIRECT_URL'] = str_replace('concrete5/', '', $_SERVER['REDIRECT_URL']);

$_SERVER['ORIG_PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['ORIG_PATH_INFO']);

$_SERVER['PATH_INFO'] = str_replace('concrete5/', '', $_SERVER['PATH_INFO']);

$_SERVER['SCRIPT_NAME'] = str_replace('concrete5/', '', $_SERVER['SCRIPT_NAME']);

require('concrete/dispatcher.php');

動作確認する

自分のサイトURLにアクセスして、concrete5がちゃんと読み出されていることを確認するべし。

記事ブロックのWYSIWYGエディタ（Redactor）の挙動を変更したい

記事ブロックのWYSIWYGエディタのRedactor（リダクター）のカスタマイズ方法です。

concrete5 バージョン8からはCKEditorが使われるようになったので5.7までしか役に立たないかもしれません。ごめんなさい。

以下のドキュメントを参考に行います。

https://concrete5-japan.org/help/5-7/recipes/customizing-redactor-editor/

やりたいこと

・自動的にdiv要素がp要素に変換される処理をやめたい

・spanなどのインライン要素が勝手に消去される処理をやめたい

修正・追加するファイル

/application/bootstrap/app.php

/application/src/Editor/RedactorEditor.php

/application/bootstrap/app.php を修正する

/application/bootstrap/app.php ファイルを開き、以下のソースを追加します。

Core::bindShared('editor', function() {
    return new \Application\Src\Editor\RedactorEditor();
});

Core::bindShared('editor', function() {

return new \Application\Src\Editor\RedactorEditor();

});

/application/src/Editor/RedactorEditor.php を追加する

<?php
namespace Application\Src\Editor;

// コアの RedactorEditor クラスを継承してオーバーライド
class RedactorEditor extends \Concrete\Core\Editor\RedactorEditor
{
    protected function getEditor($key, $content = null, $options = array())
    {
        // オプションを追加する
        $options['replaceDivs'] = false; // divがpに変換される処理をストップする
        $options['removeWithoutAttr'] = false; // spanが消去される処理をストップする

        // 親クラスの getEditor() メソッドを呼び出す
        return parent::getEditor($key, $content, $options);
    }
}

<?php

namespace Application\Src\Editor;

// コアの RedactorEditor クラスを継承してオーバーライド

class RedactorEditor extends \Concrete\Core\Editor\RedactorEditor

{

protected function getEditor($key, $content = null, $options = array())

{

// オプションを追加する

$options['replaceDivs'] = false; // divがpに変換される処理をストップする

$options['removeWithoutAttr'] = false; // spanが消去される処理をストップする

// 親クラスの getEditor() メソッドを呼び出す

return parent::getEditor($key, $content, $options);

}

肝になるのが以下の部分。

$options[‘replaceDivs’] = false; // divがpに変換される処理をストップする

$options[‘removeWithoutAttr’] = false; // spanが消去される処理をストップする

それぞれ、

・replaceDivsをfalseにすることでDivが置き換わるのを停止。

・removeWithoutAttrをfalseにすることで属性の付いていないspan等の要素が消されるのを停止。

という設定になります。

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利！スイトン（SUITON）確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる！

GitHubで公開されているconcrete5 5.7系用確認画面付メールフォーム「suiton_confirm_form_pack」を利用すると確認画面付きのメールフォームが簡単に作れました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

しかも、管理者用の自動返信メールと送信者（問い合わせしてくれた人）用の自動返信メールを別々に設定出来るのも便利でした！

インストール方法・使い方

GitHubにインストール方法や使い方が書かれています。

使う時にカスタムテンプレートの指定を「confirm」に設定することをお忘れなく。私はテンプレート指定が出来ておらず、なんで確認画面が出ないんだ～～！と頭を抱えました。

https://github.com/YuzuruSano/suiton_confirm_form_pack

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php に以下の記述をして、enableGridContainer を呼び出すとエラー画面が表示される。あ、これだけ、concrete5 version 8.1で起きたことです。

page_theme.php

<?php
namespace Application\Theme\MyTheme;
use Concrete\Core\Page\Theme\Theme;
class PageTheme extends Theme
{
    protected $pThemeGridFrameworkHandle = 'bootstrap3';
}

<?php

namespace Application\Theme\MyTheme;

use Concrete\Core\Page\Theme\Theme;

class PageTheme extends Theme

{

protected $pThemeGridFrameworkHandle = 'bootstrap3';

}

テーマのグリッド設置部分で以下のようにエリアを呼び出す。

home.php

<?php
    $a = new Area('Main');
    $a->enableGridContainer();
    $a->display($c);
?>

<?php

$a = new Area('Main');

$a->enableGridContainer();

$a->display($c);

エラー発生内容

予期せぬエラーが発生しました。
グリッドフレームワークが見つかりませんでした。グリッドエリアのメソッドには、PageTheme クラスで定義された有効なグリッドフレームワークが必要です。

No grid framework found. Grid area methods require a valid grid framework defined in a PageTheme class.

対処方法

テーマをアンインストールして再度インストールし直す（テーマを切り替えるだけではダメ）とGridフレームワークが認識されてエラーが消えた。

page_theme.phpはテーマのインストール時に保持されるっぽいかも？

まとめ

concrete5を使った制作のお役に立てれば幸いです。

Version 8が出ているのになんで5.7やねんというツッコミが来そうですが。大人の事情をお察しください。

concrete5の最新バージョン「concrete5 Version 8」はExpressと呼ばれるkintoneチックなデータベースを作れる機能が追加されるなど更に進化をしています。

興味がある方は、ぜひ最新バージョンをダウンロードして使ってみましょう！

https://concrete5-japan.org/

2017年1月25日には、8.1.0もリリースされています！

https://concrete5-japan.org/news/concrete5-810/

【concrete5】concrete5 ver5.7のフォームに自動返信機能をつける方法

concrete5のフォームブロックには、自動返信機能が無い！

concrete5のフォームブロックにはフォームを送信してくれた人に対する自動返信の機能が付いていません。

企業サイトでは自動返信をお客様に対して送信ほしい。という事をよく言われるので自動応答出来ないとちょっと困りますよね。

アドオンや外部フォームを使うなどの実現方法もありますが、わりと簡単に自動返信機能のカスタマイズは行なえますので、その方法をご紹介します。

自動返信メールの設定手順

以下の流れで自動返信機能を追加します。コピペで出来ると思うので、怖がらずにチャレンジしてみてくださいね。

フォームブロックを使ってフォームを作る
自動返信メールの雛形を作成する
フォームブロックに自動返信処理を追加する

1. フォームブロックを使ってフォームを作る

普通にフォームブロックを使ってフォームを作りますが、メールアドレスフィールドの設定を忘れないようにしましょう！

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信】にチェックを入れる

このアドレスに自動返信することになります。もちろん必須入力にすることをお忘れなく。

補足：サイト管理者へのフォーム送信通知メールの設定も忘れないように

フォームの送信があった時に、サイト管理者へメールで通知出来るように以下の設定も忘れないようにしましょうね。意外と忘れがちなので。

2. 返信メールの本文を作成する

ココからは、concrete5のapplicationフォルダに必要なファイルを追加していきます。

GitHubにサンプルファイルを置いたので、まずは以下からダウンロード下さい。

GitHubから雛形をダウンロードする

以下に自動返信処理の雛形を置いたのでダウンロードしてきて下さい。

利用するのはapplicationフォルダ配下のみです。

https://github.com/onocom/concrete5-formblock-auto-reply-skeleton

2.自動返信メールの雛形を作成する

GitHubからダウンロードしたファイルの中から以下のファイルを開きます。

/application/mail/block_form_auto_reply.php

このファイルが自動返信メールで利用されるメールテンプレートになります。
開いたら、以下部分の冒頭文・署名を好きな文言に書き換えます。

$body = t("
ホームページからのお問い合わせありがとうございます。
以下の内容で承りました。
%s
──────────────────────────────────────────
サンプル株式会社
http://example.com/
住　　所：愛知県名古屋市
電話番号：XXX-XXX-XXXX
", $submittedData);

$body = t("

ホームページからのお問い合わせありがとうございます。

以下の内容で承りました。

──────────────────────────────────────────

サンプル株式会社

http://example.com/

住　　所：愛知県名古屋市

電話番号：XXX-XXX-XXXX

", $submittedData);

3.フォームブロックに自動返信処理を追加する

次は、自動返信処理を追加していきます。

と言っても、先ほどGitHubよりダウンロードしたPHPファイルに送信処理は記述しておいたので、送信元メールアドレスや、送信者名、メールの件名等のパラメータを変更してあげるだけで良いかと思います。

GitHubからダウンロードしたファイルの中から以下のファイルを開きます。

/application/blocks/form/controller.php

580行目あたりから始まる以下の部分を書き換えていきます。

// ---------------------------------------------------------------
// 自動返信処理 Auto Reply
// ---------------------------------------------------------------
// --------- 編集が必要なのはココから
$myFromName = "山田 太郎"; // 送信者名
$myFromAddress = "myaddress@example.com"; // 送信者メールアドレス
$myMailTitle = "お問い合わせありがとうございます"; // メールの件名
$myMailTemplate = "block_form_auto_reply"; // メールのテンプレート名
// --------- 編集が必要なのはココまで

$mh = Core::make('helper/mail');
$mh->to($replyToEmailAddress);
$mh->from($myFromAddress,$myFromName);
$mh->addParameter('questionAnswerPairs', $questionAnswerPairs);
$mh->load($myMailTemplate);
$mh->setSubject($myMailTitle);
@$mh->sendMail();
// ---------------------------------------------------------------
// / 自動返信処理 Auto Reply 
// ---------------------------------------------------------------

// ---------------------------------------------------------------

// 自動返信処理 Auto Reply

// ---------------------------------------------------------------

// --------- 編集が必要なのはココから

$myFromName = "山田太郎"; // 送信者名

$myFromAddress = "myaddress@example.com"; // 送信者メールアドレス

$myMailTitle = "お問い合わせありがとうございます"; // メールの件名

$myMailTemplate = "block_form_auto_reply"; // メールのテンプレート名

// --------- 編集が必要なのはココまで

$mh = Core::make('helper/mail');

$mh->to($replyToEmailAddress);

$mh->from($myFromAddress,$myFromName);

$mh->addParameter('questionAnswerPairs', $questionAnswerPairs);

$mh->load($myMailTemplate);

$mh->setSubject($myMailTitle);

@$mh->sendMail();

// ---------------------------------------------------------------

// / 自動返信処理 Auto Reply

// ---------------------------------------------------------------

コメントにあるとおり、送信者名（$myFromName)・送信者のメールアドレス（$myFromAddress）・メールの件名（$myMailTitle）を書き換えます。

メールのテンプレート名（$myMailTemplate）は基本的にこのままで大丈夫ですが、オリジナルのメールテンプレートを利用したい場合は、ここにそのテンプレート名を設定します。

4. ファイルをアップロードしよう

編集が終わったら編集を行った以下の2ファイルをサーバ上の同じディレクトリにアップします。

mailディレクトリやblocksディレクトリ、formディレクトリが存在しない場合は、作成します。必ず、このパスになるようにファイルを配置しましょう。

/application/mail/block_form_auto_reply.php
/application/blocks/form/controller.php

※ もし上記ファイルが既に存在している場合、ファイル比較ソフトを利用するなどして慎重にマージして下さい。

これで多分おそらく、フォームに自動返信機能が付加されているはずです。

試しに送信することをお勧めします。

まとめ

まだまだ改善の余地はありますが、少しばかりの道筋は示せたかと思います。

このカスタマイズ方法がご参考になれば幸いです。

改善の余地

必要な関数のみオーバーライドしたほうがメンテナンス性高そう。

複数フォームが設置されている場合のことをもう少し考慮したほうが良い。

concrete5 Version8が出てるけど動くかは検証出来ていない。

動作確認環境

concrete5 Version – 5.7.5.13

【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のほんの一部のカスタマイズしか紹介していません。

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

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

WordPressの検索フォームをカスタマイズしよう

検索条件にカスタムタクソノミーを追加しよう

1.searchform.php をテーマフォルダに追加しよう

2.searchform.php にカスタムタクソノミー選択用のセレクトボックスを設置

2-1. カスタムタクソノミーを複数設置したい場合

3. カスタマイズした検索ボックスを呼び出し

まとめ

concrete5 のサイト構築は道を切り開く醍醐味が味わえる

目次

困った：ページタイプのデフォルトブロックが何故か編集できない

管理者にも「一般管理者」と「スーパー管理者」の2つがある。スーパー管理者でしか、ページタイプのデフォルトブロックは編集できない

サブディレクトリにconcrete5をインストールしてルート（/）で公開したい

やりたいこと

修正・作成するファイル

/.htaccess の修正内容

/concrete5/.htaccess の修正内容

/concrete5/index.php の修正内容

動作確認する

記事ブロックのWYSIWYGエディタ（Redactor）の挙動を変更したい

やりたいこと

修正・追加するファイル

/application/bootstrap/app.php を修正する

/application/src/Editor/RedactorEditor.php を追加する

確認画面付き問い合わせフォーム(自動返信メールあり)の作成

便利！スイトン（SUITON）確認フォームアドオンを使うと確認画面付きの問い合わせフォームが作れる！

インストール方法・使い方

なぜかpage_theme.phpが読み込まれない。bootstrap3のグリッドが有効化できない

page_theme.php

home.php

エラー発生内容

対処方法

まとめ

concrete5のフォームブロックには、自動返信機能が無い！

自動返信メールの設定手順

1. フォームブロックを使ってフォームを作る

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信 】にチェックを入れる

補足：サイト管理者へのフォーム送信通知メールの設定も忘れないように

2. 返信メールの本文を作成する

GitHubから雛形をダウンロードする

2.自動返信メールの雛形を作成する

3.フォームブロックに自動返信処理を追加する

4. ファイルをアップロードしよう

まとめ

改善の余地

動作確認環境

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

Press Thisとは

Press This

Press Thisの使い方

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

肝になるプログラム

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

地味な機能を弄る喜び

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

WordPress公式テーマ Lightningとは

Lightning のインストール方法

Lightning のカスタマイズ

すごいぞLightning

1-1. メールアドレスフィールドを追加して、【このEmailアドレスへ返信】にチェックを入れる