ブログ・エス技研

当ブログは引越しをしました。10秒後に自動で転送しますが、転送されない場合は、http://blog.s-giken.net/ をご覧ください。
ブログ・エス技研 TOP  >  2013年11月

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:-- ] カテゴリ:スポンサー広告 | TB(-) | CM(-)

WordPress・Contact Form7、MW WP Form共通 細かなデザイン調整方法

WordPressでお問い合わせフォームと言えば!「Contact Form7」と言われるほどメジャーな存在ですが、「MW WP Form」というフォームもありますよ、という記事を書きました。(http://ssgiken.blog.fc2.com/blog-entry-60.html 参照)

ですが、細かなデザインをするうえで、ラジオボタンやチェックボックスの処理が結構わからずに困ってしまっていました。

今日は、その方法の紹介です!
基本的には、ContactForm7の記述方法で記述していますが、同じやり方が MW WP Formでも使えますので、同様に試してみてください。


ラジオボタンを例にとってみましょう。
通常、ラジオボタンは、下記の様に設定します。

----------------------------
<p>らじお<br />
[radio radio-315 "あああ" "いいい" "ううう"] </p>
----------------------------

この場合、↓このように表示されます。
WordPress_ContactForm7_1



ですが、実は一つの「[radio .....]」の中にすべての項目を入れてしまう必要はないのです。(知ってる人は知っていると思いますし、いろいろ試す方は同じように試すと思いますが...)

IDさえ同じものを設定してあれば、それは一つのラジオボタンとして認識してくれます。
そのため、縦に並べたければ、下記の様に記述します。
----------------------------
<p>らじお<br />
[radio radio-315 "あああ"]<br/>
[radio radio-315 "いいい"]<br/>
[radio radio-315 "ううう"]</p>
----------------------------

この場合、↓このように表示されます。
WordPress_ContactForm7_2



項目と項目の間に全角スペースを入れて調整する方法もできます。
----------------------------
<p>らじお<br />
[radio radio-315 "あああ"]__[radio radio-315 "いいい"]__[radio radio-315 "ううう"] </p>
----------------------------
※上記は「__」で記述していますがそこに全角スペースなどを入れて調整すればいいかと思います。

この場合、↓このように表示されます。
WordPress_ContactForm7_3



ここでは簡易的な調整方法をご紹介していますので、スペースを入れるといった手抜きな調整方法を取っていますが、項目ごとに分割する方法さえわかれば、あとは divタグなどを入れて cssで本格的に設定をすることもできるでしょう。

大した話ではないんですけども、これに気づくまでに結構時間がかかってしまったので、同じように悩んでいる方がいれば、と思って書いてみました。


スポンサーサイト
[ 2013年11月25日 00:36 ] カテゴリ:WordPress | TB(0) | CM(0)

WordPressのおすすめの確認画面付きお問い合わせフォームプラグイン・MW WP Form

「MW WP Form」という便利なお問い合わせフォームのプラグインの紹介です。


WordPressのお問い合わせフォームと言えば、Contact Form7といわれるほど Contact Form7は多くの方に使われているお問い合わせフォームです。
その理由に、このプラグインを拡張するプラグインもあるくらいですから。

ただ、このフォームを日本で使うには致命的ともいえる欠点がありました。
それは、確認画面がないことです。

日本では、入力画面の後に入力確認画面があり、そこから完了画面に遷移するということが一般的ですが、海外ではそれが一般的ではないため、WordPressをはじめとする海外で主流のシステムには確認画面がないものも多く存在します。

そのため、WordPressの入力の処理で入力確認画面があるものはほとんど見かけません。
同じく、Contact Form7も入力確認画面がありませんが、日本で Webサイトを作るにあたってはお客さんがそれを強く望むこともあることがあるのです。

その場合にお奨めできるのが「MW WP Form」というプラグインです。
日本人が開発したとのことで、日本の事情にマッチしたプラグインだと思います。

使い方、設定方法については下記のサイトが参考になると思います。
 http://webdesignerwork.jp/wordpress/mw-wp-form/
 http://mypacecreator.net/blog/archives/2063

確認画面が出るだけでなく、確認、完了画面の URLをそれぞれ設定することができますので、コンバージョンを取る必要がある場合などにもデフォルトで対応できるようになっています。
確認メールも入力者、管理者と分けて設定することができたり、入力された情報をデータベースに保存する機能もついています。

ただ、残念なのは、入力フォームの各項目に idや classの設定をすることができないため、JavaScriptを絡ませた処理を入れたり、デザインに凝ったフォームを作成することは難しいようです。

デザインに凝ったフォーム+確認画面が必要、という場合には、オリジナルでフォームを作成する必要がありそうな気がします...



そのほか、お問い合わせフォームで確認画面が表示できるプラグインとしては「TrustForm」というものもあります。
 http://maka-veli.com/WP-TrustForm.html

こちらも確認画面を設定することができるフォームのプラグインです。

実際に使ってみると分かるのですが、「Contact Form7」「MW WP Form」と違い、非常に直感的にドラッグ&ドロップでフォームを作っていくことができますので、プログラムに慣れていない方にも非常にとっつきやすいものだと思います。


ただ、デザインの自由度が低いのが残念なところで、デザインは基本的に変更できないと思っておくしかなさそうです。
(classの設定は可能ですので、cssで調整することはできそうです。)



それぞれのプラグインにはそれぞれの特徴がありますので、必要な機能、ぜったい外せない機能を見極めてプラグインを選んでいく必要がありますね。
[ 2013年11月18日 00:05 ] カテゴリ:WordPress | TB(0) | CM(0)

baserCMSは 3種類のデバッグモードが用意されています

baserCMSですが、デバッグモードが 3種類用意されています。

デバッグモードはその名の通り、デバッグ用のモードですが、このモードにするとキャッシュがされなくなりますので、プログラムの修正やデザインの修正を行っているときに変にキャッシュされなくて済むために非常に重宝します。

どうせアクセスが少ないサイトだから、このままデバッグモードで公開したい、と思うくらいです。
出来れば、通常公開設定でキャッシュしないモードを追加してほしいところですね。


ところで、デバッグモードは 3種類あるのですが、その違いについての説明ページがありません。

何が違うか、と言いますと、1→2→3となっていくにしたがってデバッグの情報がより詳細なものになっていく、ということです。
変えていくことでより多くの情報が追加されていきます。

デバッグモードは、1、2、3と変更してもまたすぐに元に戻すこともできますので、どんな情報が表示されるのか、試して変更してみるといいでしょうね。

ちなみに、エラーを出す際に一番いいのは URLを間違って入力してみることでしょうか。
[ 2013年11月18日 00:02 ] カテゴリ:baserCMS | TB(0) | CM(0)

baserCMS トップページのニュースの部分をメンテナンスしたい場合

baserCMSで、トップページのニュースの部分を自分の指定通りに変更したい場合にどうするか、という記事です。

http://blog.mani-lab.com/wp_import/archives/65
このサイトが非常に分かりやすいです。

トップページのニュースの部分をメンテナンスをする場合は、下記の関数を使います。
http://basercms.net/reference_2/archives/31

トップページのニュースの部分をメンテナンスする場合は、「固定ページ一覧」-「index」を開き、6行目にある

------------
<?php $bcBaser->blogPosts('news', 5) ?>
------------

の部分を下記の様に変更します。
例えば、「topics」というブログを追加し、それをトップページに表示させる場合は、

------------
<?php  $bcBaser->blogPosts('topics', 5, array( 'template' => 'posts2' ) ) ?>
------------

1つ目の引数がブログ名ですので、それを「topics」に変更します。
そして、3つ目の引数がオプションですので、そこで反映させるテンプレートを選択します。

そこで指定するテンプレートは下記になります。
/app/webroot/themed/{テーマ名}/blog/{ブログ名}/posts2.php

テンプレートを指定する際は、「.php」の部分を記述する必要はありません。
デフォルトでは「posts.php」が指定されますので、その「posts.php」をもとにしてデザインを変更していくと比較的短時間に変更をすることができるでしょう。

[ 2013年11月15日 23:55 ] カテゴリ:baserCMS | TB(0) | CM(0)

baserCMS お問い合わせフォームのボタンを画像に変えたい場合(ボタンのテキストを変えたい!っていう場合も)

baserCMSですが、お問い合わせフォームのボタンは、テキストで記述されています。
これを画像に変えたい!そういう要望はそれなりにあるのかと思いますが、変更の方法がマニュアルなどに掲載されていないため、かなり悩みましたが、その対応方法を書いておきます。
(ボタンのテキストを変えたい!というときも参考になるでしょう。)


ボタンの情報の記述は、下記ファイルにあります。
 /baser/plugins/mail/views/elements/mail_form.php

69行目、70行目が入力確認ページのボタンで、72行目が入力ページのボタンですが、下記は 72行目の入力ページのボタンをサンプルで書いています。

-------------
<?php echo $mailform->submit(' 入力内容を確認する ', array('div' => false, 'class' => 'btn-orange button form-submit', 'id' => 'BtnMessageConfirm'))  ?>
-------------
 ↓このように修正
-------------
<?php echo $mailform->submit( 'aaaaa.jpg', array('alt' => ' 入力内容を確認する ', 'div' => false, 'class' => 'btn-orange button form-submit', 'id' => 'BtnMessageConfirm'))  ?>
-------------

修正ポイントは、テキストで表示される「 入力内容を確認する 」を「aaaaa.jpg」の様にファイル名に変更するだけです。実に簡単!

使用する画像は「/app/webroot/themed/{テーマ名}/img/」のフォルダに入っていれば、ファイルのパスも記述する必要もなく、自動的にパスも付与されます。
必要であれば、下記の様に「'alt' => ' 入力内容を確認する '」を追加し、画像の altを追加することもできます。



対応方法は分かってみれば至極簡単な方法なのですが、ボタンを画像にするだけなのにここに行きつくまでに 3時間~4時間も試行錯誤してしまいました...

※この対応を行うと、すべてのボタンが共通して変更してしまいますので、フォームごとにボタンを変えたい場合は、ページによって分岐する処理を作る必要があるでしょう。(もしくはテンプレートファイルを分岐させる処理が必要でしょう。)


※ボタンの文言に修正したい場合は、単純にテキストを変更しましょう。
 画像にする場合と同様に、フォームごとにボタンのテキストを変える場合も分岐が必要になりますね。

※画像のファイル名が違っていたり、画像が「img」フォルダの中にない場合は、「実行」というよくあるボタンが表示されます。その場合は、画像の場所、ファイル名を確認してみてください。



ちなみに、65行目~67行目にある下記の入力のリセットをするボタンの処理ですが、フォームのコンバージョンをアップするためには削除しておくべきですね。
-------------
<?php if($this->action=='index'): ?>
	
<?php endif; ?>
-------------

まるっと削除してもいいですし、下記の様にコメントアウトしてもいいでしょう。
-------------
<?php /* if($this->action=='index'): ?>
	
<?php endif; */ ?>
-------------

※コンバージョンアップのためには、入力する項目を減らす、不必要なリンクを減らす、といった対策に加え、「リセットボタン」は使わないということも重要だそうです。

[ 2013年11月13日 23:03 ] カテゴリ:baserCMS | TB(0) | CM(0)

baserCMS サイト管理者権限でファイルアップロードを行う・権限設定の詳細について

admin権限、システム管理者権限でファイルをアップロードすることは問題ないのですが、operators権限、サイト運営権限でファイルをアップロードしようとするとエラーが発生して先に進めない状況が生まれます。

それに対して、公式フォーラムで下記の様に説明がされています。
http://forum.basercms.net/modules/newbb/viewtopic.php?topic_id=547&forum=5

しかし、そもそもどこでその設定を行うのかが分かっていない人にとっては、これだけ見てもどこに「/admin/uploader_files/*」を設定するのかが分かりません。

私もこのページを見つけて参考になるとは思いましたが、何処に対応すればいいかが分からないため、どうすればいいかさっぱりわかりませんでした。


そして、いろいろ調べた結果、アクセス制限の設定管理ができるページがあることが分かりました。

その場所は、右上の「システムナビ」-「ユーザグループ一覧」を選択し、ページを表示させます。
そして、一覧の中の一番左の列の中に鍵のマークが付いてと思います。


それをクリックすると、サイト運営権限ユーザに対する権限設定の一覧が表示されますので、そこに権限を追加して設定を行います。

また、baserCMS 2.1.2では、追加する「URL設定」は、「/admin/uploader/uploader_files/*」です。
上記 URLでは「/admin/uploader_files/*」と書かれておりますが、この設定ではうまく動きませんでしたね。この書き込みがされているのは、1.6.15のバージョンについてですので、それから変わったのかもしれません。


また、権限全般について設定の理解について、下記のサイトも参考になるのではないかと思います。
http://forum.basercms.net/modules/newbb/viewtopic.php?topic_id=937&forum=3#forumpost3884

こちらの質問自体は、postgreSQLの問題に起因する質問ですが、サイト管理者権限でブログを管理する場合の権限設定についても理解できるでしょう。

例えば、ブログ IDが 2のブログの権限を付与するには、
 /admin/blog/blog_posts/*/2/*
の様に設定することで、サイト管理者権限でもブログの管理ができるようになります。

「/2/」の前の「*」は、edit、index、addなどの機能が入ります。
一覧、追加、削除すべての機能を利用できるようにするために「*」を追加います。
「/2/」の後ろの「*」は、ブログの記事 IDが入ります。すべての記事の更新を可能にするため「*」を設定します。

ただ、これだけでは「保存前確認」(プレビュー)の機能は利用できませんので、プレビューもできるように追加しましょう。
 /admin/blog/preview/2/*
上記の例と同じく、「/2/」はブログの IDですので、適宜変更してください。また、「/2/」の後ろの「*」はブログの記事 IDになります。


ただ、「/admin/blog/blog_posts/*/2/*」を設定してしまうと、admin権限で更新した記事も staffが更新することができるようになってしまう点は注意が必要です。
[ 2013年11月11日 22:59 ] カテゴリ:baserCMS | TB(0) | CM(0)

baserCMSのメルマガで当サイトが紹介されていたようです

このブログのコンテンツがきちんとインデックスされているかを調べているときに、当サイトのコンテンツが baserCMSユーザー会のメルマガで紹介されていることを発見しました。

そのメルマガの情報は以下のような感じのようです。
 https://groups.google.com/forum/#!msg/basercms/trQ7LiduUHE/a2Tmzmh8s7kJ


このメルマガが発行されたタイミングでは、baserCMSの記事は 5件くらいしか書いていなかったと思いますので、どの記事を取り上げるか悩んだのではないかとも思いますが、その中でもよさそうなのを選んでもらった記事がその記事ということなんでしょうね。

思うに、記事を紹介したいということより、baserCMSのことを書いているブログがあります、といった感じのご紹介なんじゃないかと。
その紹介方法として一つの記事を取り上げたんじゃないかと。

紹介された記事は、テスト環境から本番環境への環境移設の際の手順をまとめたものですので、メルマガで紹介するには一番無難な記事だったんでしょうかね。


それはさておき、私としても baserCMSは非常に便利なツールだと感じていますので、微力ながらもこのブログで情報提供をしていきながら、ユーザのすそ野を広げていけたらいいな、と思いながら記事を書いていますので、baserCMSのユーザ会の方々に知っておいていただけるのは嬉しい限りですね。


baserCMSはフレームワークのようなものだと感じています。
CakePHP自体がフレームワークなわけですが、その上にさらに便利な仕組みを追加して提供されているフレームワークといった感じですかね。

Databaseの連携(アソシエーション)のとある条件では CakePHPと挙動が違う場合(※)があるようで、テーブルを連携させる場合にはやや難が出てくる場合もあるようにも思いますが、CMSを利用して Webサービスを構築していく上では非常に便利な機能がそろっており、工数をかけずにサイトを構築していくのに非常に便利なツールですね。

これからも発展していってくれることを願っています!
baserCMSの開発をされている方々、頑張ってくださいね!!




【Cakephp 2.3・baserCMS テーブルの連携(アソシエーション)関連記事】
baserCMSでオリジナルのデータベースから情報を取得する場合
CakePHP 2.3 ID以外のカラムでアソシエーション(連携)をさせる場合
CakePHP 2.3 ID以外のカラムでアソシエーション(連携)をさせる場合の詳細ページの注意点
CakePHP 2.3 連携先のテーブルの項目で条件抽出する場合
CakePHP 2.3 テーブルの項目を演算した結果を条件として抽出する方法
baserCMS ID以外のカラムでアソシエーション(連携)をさせる場合


[ 2013年11月08日 00:00 ] カテゴリ:baserCMS | TB(0) | CM(0)

baserCMS favicon.icoを変更したい場合

baserCMSの favicon.icoは、デフォルトでは baserCMSのものになっていますが、これをオリジナルものものに変えたい、という場合の説明です。

http://forum.basercms.net/modules/newbb/viewtopic.php?topic_id=551&forum=5

ここのフォーラムにも書いてあるように、「/app/webroot/favicon.ico」を差し替えると変わるはずですが、私もなかなか変わらずに困りました。

ただ、ブラウザを変えると変わっていることが確認できることもありますので、ブラウザを変えて確認してみるのも一つの方法でしょう。

ブラウザを変えて変わっていることが確認できれば、あとは各自のローカルの環境ですので、それに対してはサーバ側、運営側からはどうしようもないことですので...
ドメインを変えるわけにもいきませんし。


あとは、「favicon 表示されない」「favicon キャッシュ」といったキーワードで検索すれば、いろいろな対処方法が出てきますので、参考にして見るといいでしょう。


ちなみに、「/cake/console/libs/templates/skel/webroot/favicon.ico」にも同様のファイルがありますので、気休めとしてこちらも修正しておくのもいいかもしれないですね。
[ 2013年11月06日 23:48 ] カテゴリ:baserCMS | TB(0) | CM(0)
プロフィール

エス技研

Author:エス技研
性別:男性
職業:Web系エンジニア
エンジニアになって 15年ほど経ちますが、その途中で 5年ほどディレクタ、マネジメントを中心とした業務を行っていたためにやや現場を離れていましたが、転職をきっかけに 2012年に現場に復帰し、新たな技術を楽しみながら勉強しています。
メインの環境は LAMP環境です。

FC2ブログランキング
FC2カウンター
FC2拍手ランキング
GoogleAdWords
カレンダー
10 | 2013/11 | 12
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
検索フォーム
ブロとも申請フォーム
QRコード
QR
フリーエリア


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。