cocoonのというかwordpress自体かな?のコメントフォームって
サイズが大きめだし表示されっぱなしなのが気になっていて
ここをどうにか出来ないかなーと色々やってたんですが
ようやくこんな感じかなーと言う具合に出来たので備忘録記事を残しておきます
追記現在はデフォルトのコメントフォームに戻してカスタマイズしています
やりたい事
表示されたままの状態のコメントフォームを隠してトグルスイッチ化したい
一番下の置いてあるとはいえ、常にサイズの大きなフォームが出っぱなしなのは
かなり気になっていたので、この部分を普段は隠しておきたかった
こんな感じですしねー
修正とコード
グーグル先生に聞いて出てきたサルワカさんの記事を使わせて貰いました
HTMLの部分をcomments.phpへ追加して、cssの部分は子テーマのstyle.cssへ追加です
サルワカさんの記事にも書いてありますが、HTMLとCSSだけで切り替える方法なので
そのままAMP対応ページにも使えるそうです
comments.phpの修正
まずはフォーム部分を形成しているcomments.phpの修正をします
- //通常ページ - comment_form($args);
この部分を下のように変更します
//通常ページ ?>
<div class="hidden_box">
<input type="checkbox" id="label" />
<label for="label">Open comment form</label>
<div class="hidden_show">
<?php comment_form($args); ?>
</div>
</div><?php
phpの閉じタグと開始タグは半角です…置き換えられちゃうので仕方なく(;・∀・)
隠したい部分(ここではデフォルトのコメントフォーム部分)を挟む感じです
style.css
ボタンの装飾や表示の切り替え部分を追加します
ソースコードを開く
/* フォームを隠す処理 */
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
.hidden_box input[type="checkbox"] {
display: none;
}
/* この部分で中身表示 */
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
/* フォームボタン用 */
.hidden_box {
display: inline-block;
position: relative;
padding: 0.5em 1em;
text-decoration: none;
color: #666;
transition: .4s;
font-family: 'Raleway', sans-serif;
}
.hidden_box label {
font-weight: 700;
}
.hidden_box label:hover {
color: #8ecdf0;
font-family: 'Raleway', sans-serif;
font-weight: 700;
}
.hidden_box:before,
.hidden_box:after {
position: absolute;
top: 0;
content:'';
width: 8px;
height: 100%;
display: inline-block;
}
.hidden_box:before{
border-left: solid 1px #8ecdf0;
border-top: solid 1px #8ecdf0;
border-bottom: solid 1px #8ecdf0;
left: 0;
}
.hidden_box:after{
content: '';
border-top: solid 1px #8ecdf0;
border-right: solid 1px #8ecdf0;
border-bottom: solid 1px #8ecdf0;
right: 0;
}
HTMLの部分、CSSの部分共にサルワカさんの記事に詳しい説明が書いてありますので
詳しく知りたい方はそちらを確認してみてください
フォームを隠す処理部分の.hidden_boxにはinput[type="checkbox"]を付けないと
必要な部分(他の要素のインプット部分)まで消えますので注意です
修正と追加が終わったらFTPで子テーマへアップロード
完成
上記部分を終わらせるとこんな感じになります
出来ればリストの部分も普段は隠しておきたかったんだけど、ちょっとそこまでは無理でした
画像はリスト部分がある状態ですが、これでもかなりスッキリしました
意図せずフォームの幅も小さくなったので満足です (一応コメント入力部分で広げることも出来ました)
おわり
当初はコメントフォームプラグインを使っていたんだけど、いつの間にかフォーカスしても
名前部分や送信ボタンが出てこなくなっちゃってデフォルトのフォームを使ってましたが
これで満足行くスタイルに出来ました(もう少し調整が必要な気はしますが)
うちのサイトではあまり使われる事はないけど、ずっと表示されたままよりは
隠しておいてスッキリさせてた方が見た目も良いですしね
何かあっても責任は取れませんが、もし同じような事をしたいと思ってる人の参考になれば!
Comments
通常ページは特に問題ないけど
AMPページだと元々閉じられてるものを開くとこの状態がまた出てくるって形になっちゃうんだよなぁ…