ratio_3_2 に標準コメントフォームを呼び出しレスポンシブにカスタマイズする方法【baserCMS】

2017-02-22 23:50:00

baserCMS 標準のコメントフォームを呼び出し、レスポンシブデザインにも対応させるようにカスタマイズする方法

ratio_3_2 にコメントフォームを設置する方法第三弾です。

→ 第一弾 Facebook コメントプラグインを設置する方法

→ 第二弾 DISQUS コメントフォームを設置する方法

今回は、baserCMS 標準のコメントフォームを呼び出し、レスポンシブデザインにも対応させるようにカスタマイズする方法をご紹介いたします。

メリット

他のテーマと同様に標準の機能が使えます。シングルコメントプラグインを使えば、記事毎にコメントフォームを設置するかどうか選べるようになります。

デメリット

画像の添付ができない。ブログ記事にしか呼び出せない。

設置したデモページはこちら

→ デモページ
（実際にコメントが出来ます）

スポンサードリンク

実践編

エレメント一覧の blog_comments.php というファイル名を blog_comments_xxx.php の様に変えることで、標準のコメントフォームを呼び出すことが出来ますが、カスタマイズしづらいので、blog_comments.php にクラス名を付け加えた物に置き換えます。

→ レイアウトテンプレート一覧 → エレメント一覧 → blog_comments.php

書き換えた blog_comments.php

<?php
/**
 * [PUBLISH] ブログコメント一覧
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2015, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2015, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Blog.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
$prefix = '';
if (Configure::read('BcRequest.agent')) {
$prefix = '/' . Configure::read('BcRequest.agentAlias');
}
?>
<script>
$(function() {
loadAuthCaptcha();
$("#BlogCommentAddButton").click(function() {
sendComment();
return false;
});
});
/**
 * コメントを送信する
 */
function sendComment() {
var msg = '';
if (!$("#BlogCommentName").val()) {
msg += 'お名前を入力してください\n';
}
if (!$("#BlogCommentMessage").val()) {
msg += 'コメントを入力してください\n';
}
<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
if (!$("#BlogCommentAuthCaptcha").val()) {
msg += '画象の文字を入力してください\n';
}
<?php endif ?>
if (!msg) {
$.ajax({
url: $("#BlogCommentAddForm").attr('action'),
type: 'POST',
data: $("#BlogCommentAddForm").serialize(),
dataType: 'html',
beforeSend: function() {
$("#BlogCommentAddButton").attr('disabled', 'disabled');
$("#ResultMessage").slideUp();
},
success: function(result) {
if (result) {
<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
loadAuthCaptcha();
<?php endif ?>
$("#BlogCommentName").val('');
$("#BlogCommentEmail").val('');
$("#BlogCommentUrl").val('');
$("#BlogCommentMessage").val('');
$("#BlogCommentAuthCaptcha").val('');
var resultMessage = '';
<?php if ($blogContent['BlogContent']['comment_approve']): ?>
resultMessage = '送信が完了しました。送信された内容は確認後公開させて頂きます。';
<?php else: ?>
var comment = $(result);
comment.hide();
$("#BlogCommentList").append(comment);
comment.show(500);
resultMessage = 'コメントの送信が完了しました。';
<?php endif ?>
$.ajax({
url: $("#BlogCommentGetTokenUrl").html(),
type: 'GET',
dataType: 'text',
success: function(result) {
$('input[name="data[_Token][key]"]').val(result);
}
});
$("#ResultMessage").html(resultMessage);
$("#ResultMessage").slideDown();
} else {
<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
loadAuthCaptcha();
<?php endif ?>
$("#ResultMessage").html('コメントの送信に失敗しました。入力内容を見なおしてください。');
$("#ResultMessage").slideDown();
}
},
error: function(result) {
alert('コメントの送信に失敗しました。入力内容を見なおしてください。');
},
complete: function(xhr, textStatus) {
$("#BlogCommentAddButton").removeAttr('disabled');
}
});
} else {
alert(msg);
}
}
/**
 * キャプチャ画像を読み込む
 */
function loadAuthCaptcha() {

var src = $("#BlogCommentCaptchaUrl").html() + '?' + Math.floor(Math.random() * 100);
$("#AuthCaptchaImage").hide();
$("#CaptchaLoader").show();
$("#AuthCaptchaImage").load(function() {
$("#CaptchaLoader").hide();
$("#AuthCaptchaImage").fadeIn(1000);
});
$("#AuthCaptchaImage").attr('src', src);

}
</script>

<div id="BlogCommentCaptchaUrl" style="display:none"><?php echo $this->BcBaser->getUrl($prefix . '/blog/blog_comments/captcha') ?></div>
<div id="BlogCommentGetTokenUrl" style="display:none"><?php echo $this->BcBaser->getUrl('/blog/blog_comments/get_token') ?></div>

<?php if ($blogContent['BlogContent']['comment_use']): ?>
<aside class="BlogComment">

<h4>この記事へのコメント</h4>

<div class="BlogCommentList">
<?php if (!empty($post['BlogComment'])): ?>
<?php foreach ($post['BlogComment'] as $comment): ?>
<?php $this->BcBaser->element('blog_comment', array('dbData' => $comment)) ?>
<?php endforeach ?>
<?php endif ?>
</div><!-- /BlogCommentList -->

<section class="BlogCommentSend">
<h4>コメントを送る</h4>

<?php echo $this->BcForm->create('BlogComment', array('url' => $prefix . '/blog/blog_comments/add/' . $blogContent['BlogContent']['id'] . '/' . $post['BlogPost']['id'], 'id' => 'BlogCommentAddForm')) ?>

<table cellpadding="0" cellspacing="0" class="row-table-01">
<tr>
<th><?php echo $this->BcForm->label('BlogComment.name', 'お名前') ?></th>
<td><?php echo $this->BcForm->input('BlogComment.name', array('type' => 'text')) ?></td>
</tr>
<tr>
<th><?php echo $this->BcForm->label('BlogComment.email', 'Eメール') ?></th>
<td>
<?php echo $this->BcForm->input('BlogComment.email', array('type' => 'text', 'size' => 20)) ?>&nbsp;
<small>※ メールは公開されません</small>
</td>
</tr>
<tr>
<th><?php echo $this->BcForm->label('BlogComment.url', 'URL') ?></th>
<td><?php echo $this->BcForm->input('BlogComment.url', array('type' => 'text', 'size' => 20)) ?></td>
</tr>
<tr>
<th><?php echo $this->BcForm->label('BlogComment.message', 'コメント') ?></th>
<td><?php echo $this->BcForm->input('BlogComment.message', array('type' => 'textarea', 'rows' => 10, 'cols' => 40)) ?></td>
</tr>
</table>

<?php if ($blogContent['BlogContent']['auth_captcha']): ?>
<div class="auth-captcha">
<img src="" alt="認証画象" class="auth-captcha-image" id="AuthCaptchaImage" style="display:none" />
<?php $this->BcBaser->img('admin/captcha_loader.gif', array('alt' => 'Loading...', 'class' => 'auth-captcha-image', 'id' => 'CaptchaLoader')) ?>
<?php echo $this->BcForm->text('BlogComment.auth_captcha') ?><br />
&nbsp;画像の文字を入力してください<br />
</div>
<?php endif ?>

<?php echo $this->BcForm->end(array('label' => '送信する', 'id' => 'BlogCommentAddButton', 'class' => 'button')) ?>

<div id="ResultMessage" class="message" style="display:none;text-align:center">&nbsp;</div>
</section>
</aside>
<?php endif ?>

上記のコードを blog_comments.php に貼れば、こちらが呼び出されます。<hタグ>やクラス名などを変えることで CSS でカスタマイズ出来ます。

同様に、エレメント blog_comment.php も下記の様に書き換えて下さい。

<?php
/**
 * [PUBLISH] ブログコメント単記事
 * 
 * Ajax でも利用される
 * 
 * PHP versions 5
 *
 * baserCMS :  Based Website Development Project <http://basercms.net>
 * Copyright 2008 - 2015, baserCMS Users Community <http://sites.google.com/site/baserusers/>
 *
 * @copyright		Copyright 2008 - 2015, baserCMS Users Community
 * @link			http://basercms.net baserCMS Project
 * @package			Blog.View
 * @since			baserCMS v 0.1.0
 * @license			http://basercms.net/license/index.html
 */
?>

<?php if (!empty($dbData)): ?>
<?php if ($dbData['status']): ?>
<div class="comment" id="Comment<?php echo $dbData['no'] ?>">
<span class="comment-name">≫
<?php if ($dbData['url']): ?>
<?php echo $this->BcBaser->link($dbData['name'], $dbData['url'], array('target' => '_blank')) ?>
<?php else: ?>
<?php echo $dbData['name'] ?>
<?php endif ?>
</span><br>
<span class="comment-message"><?php echo nl2br($this->BcText->autoLinkUrls($dbData['message'])) ?></span>
</div>
<?php endif ?>
<?php endif ?>

CSSでレスポンシブ対応にカスタマイズ

→ custom.css に下記を追記します。

メディアクエリの記述があるので、順番に気をつけて下さい。モバイル向け、タブレット向け、PC向けの順番をめちゃくちゃに記述することはできません。必ず、「大きい→小さい」か「小さい→大きい」の順番通りに指定するようにしましょう。　詳しくは →こちら を参考にして下さい。

追加CSS

.BlogComment {
margin-top: 40px;
padding: 15px;
border: 1px solid #CCC;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}

.BlogComment h4 {
margin: 10px 10px 20px 10px;
padding: 10px;
border-bottom: medium solid #82ae46;
color: #333333;
font-size: 120%;
 font-weight: normal;
}

.BlogComment .submit {
padding: 30px 0;
text-align: center;
}

.BlogCommentList {
margin-bottom: 20px;
padding: 0 15px 20px;
border-bottom: 1px solid #CCC;
}

.comment {
margin-top: 15px;
padding-top: 15px;
border-top: 1px dotted #CCC;
}

.comment:first-child {
margin-top: 0;
padding-top: 0;
border-top: none;
}

.BlogCommentSend h5 {
margin: 0;
padding-bottom: 20px;
font-size: 18px;
font-size: 1.125rem;
}

.BlogCommentSend table {
width: 100%;
}

.BlogCommentSend table th {
padding: 10px;
}

.BlogCommentSend table td {
padding: 10px;
}

.auth-captcha {
text-align: center;
}

.auth-captcha-image {
vertical-align: middle;
}

#ResultMessage {
padding: 10px 0;
font-size: 18px;
font-size: 1.125rem;
background: #f39800;
color: #FFF;
}

.button {
margin: 10px;
padding: 15px 40px;
border: 1px solid #CCCCCC;
color: #333333;
cursor: pointer;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background: none, url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background: none, -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f3f3f3), color-stop(100%, #ffffff));
background: none, -webkit-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: none, -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: none, -o-linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
background: none, linear-gradient(top, #f3f3f3 0%, #ffffff 100%);
font-size: 20px;
font-size: 1.25rem;
}
.button:hover {
color: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#82ae46', endColorstr = '#688B38');
/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#82ae46', endColorstr = '#688B38')";
/*Element must have a height (not auto)*/
/*All filters must be placed together*/
background-image: -moz-linear-gradient(top, #82ae46, #688B38);
background-image: -ms-linear-gradient(top, #82ae46, #688B38);
background-image: -o-linear-gradient(top, #82ae46, #688B38);
background-image: -webkit-gradient(linear, center top, center bottom, from(#82ae46), to(#688B38));
background-image: -webkit-linear-gradient(top, #82ae46, #688B38);
background-image: linear-gradient(top, #82ae46, #688B38);
/*--IE9 DOES NOT SUPPORT CSS3 GRADIENT BACKGROUNDS--*/
}

@media only screen and (min-width: 500px) and (max-width: 1110px) {

input[name*="address_"] {
width: 100%;
}

.BlogCommentSend table tr {
display: inline;
}

.BlogCommentSend table th {
font-weight: bold;
}

.BlogCommentSend table th,
.BlogCommentSend table td {
padding: 10px 0 0;
margin-top: -1px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

.BlogCommentSend table td small {
display: block;
}

}

@media only screen and (min-width: 500px) and (max-width: 787px) {

#BlogCommentAddForm {
padding: 10px 0 !important;
}

#BlogCommentMessage {
width: 96%;
}
}

@media only screen and (max-width: 499px) {

.button {
font-size: 18px;
font-size: 1.125rem;
}

.BlogCommentSend table tr {
display: inline;
}

.BlogCommentSend table th {
font-weight: bold;
}

.BlogCommentSend table th,
.BlogCommentSend table td {
padding: 10px 0 0;
margin-top: -1px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
}

.BlogCommentSend table td small {
display: block;
}

#BlogCommentAddForm {
padding: 10px 0 !important;
}

#BlogCommentMessage {
width: 96%;
}
}

15行目でボーダー（下線）の色を指定

79～101行目でボタンの色など。102～116行目でマウスホバー時のボタンの色を指定しています。

グラデーションを指定していますので、変えたい方は#から始まるカラーコードをお好みの物に変更して下さい。
→ WEB色見本原色大辞典 - HTMLカラーコード

スポンサードリンク

フォームが表示されない？

ブログ基本設定（オプション欄）でコメントを受け付ける設定になっているか確認。

オプション欄のコメントの受付設定

CSS が反映されない？

ページを更新する（PCからは F5 を押す）

スーパーリロードする（PCから Ctrl ＋ F5 を同時押し Windows）

キャッシュをクリアする

→ ブラウザのキャッシュをクリアする方法（PC）

→ ブラウザのキャッシュをクリアする方法（スマートフォン）

コメントフォームの設定に便利なプラグイン

→ シングルコメントプラグイン

ブログ記事毎にコメント受付の可否設定ができるbaserCMS用プラグインです。（3系用）

最後に・・・

ratio_3_2 へのコメントフォームの追加方法はこれで終了です。Facebookコメントプラグインや DISQUS を使った方法もご紹介いたしました。コメントもあなたのコンテンツの一部になりますので、うまく活用されてみて下さい。

お役に立てましたら、いいね！＆シェアして頂けると幸いです。
ご覧頂きありがとうございます。

新着情報