【WordPress】コメント欄を自由にカスタマイズする方法
こんばんはdaissh04です。
本日は前回に引き続き、記事詳細ページにコメント欄を表示する方法になります。
前回ではコメント欄の表示まで説明したので、今回はそのデザインカスタマイズです。
comment_form($comment_form_args);
これをcomments.phpに記述することによりWordPressのコメントテンプレートを表示することができます。
ただ定型のhtmlが出力されてしまうので、そのカスタム方法を説明します。
カスタマイズするには引数でパラメータを渡す
comment_formのパラメーターは下記種類があります。
fields・・・コメント入力フォーム以外のフィールドを表示する
must_log_in・・・ログインしたユーザーのみコメントをつけられるようにしたときのhtml
title_reply・・・コメントを残すの表示テキスト
title_reply_to・・・コメントに対する返信の表示テキスト
comment_notes_after・・・コメント欄の後ろに表示するhtml
$comment_form_args = array(
'title_reply' => 'コメント投稿フォーム',
'comment_notes_after' => '',
);
comment_form($comment_form_args);
前回の例ではこのような使用をしてます。
$cooment_form_argsを配列で定義し、格納します。
title_replyは定義しないとコメントを残すと表示されますが、このようにすることにより、表示を変更することが可能。
またデフォルで、コメント欄のあとに「次のhtmlタグと属性が使えます」と表示されますが、こちらを消すことができます
'comment_notes_after' => '',
また下記関数を使用して細かいデザインが可能です。
WordPress関数 have_comments
コメントの状況を調べる。投稿されてる場合はtrue、されていないとfalseを返す
WordPress関数 comments_number
コメントの数とテキストを表示する
引数でコメント数とそれぞれで表示するメッセージを設定できます。
$zero コメントが0件の時に表示する内容
$one コメントが1件の時に表示する内容
他にも
wp_list_comments・・・投稿されたコメントの一覧を表示
paginate_comments_links・・・分割されたページのページングリストを表示
等がコメントに関する代表的な関数です。
ここまで知っているとだいぶデザインの幅を効かせると思います。
自分のブログページに適応させて見ましょう。
【WordPress】記事ページにコメント欄を追加する方法
こんにちは、daissh04です。
みなさまコロナウイルスの影響はどうでしょうか？
私の地域では、非常事態宣言が出てましたが、会社には変わらずに出社しています。
テレワークを推奨していますが、回線のキャパ的に限界があるらしく、申請しても我慢して下さいと言われる始末です。
この状態でプレスリリースでは、テレワーク開始と大々的に出してるから笑えます。
前置きはここまでにして、記事を書いて行きましょう。
プログラミングは在宅でもできてしまうから、こんな時期にはうってつけですよね！
今回は表題の通り、記事ページにコメント欄を追加する方法を紹介します。
管理画面でディスカッションの設定
ここではどのようにコメントを受け付けるか設定ができます。
よく使う項目としては
・新しい投稿へのコメントを許可する
・名前とメールアドレスの入力を必須にする
・コメントを5階層までのスレッド（入子）形式にする
・すでに承認されたコメントの投稿者のコメントを許可し、それ以外のコメントを承認まちにする
にチェックを入れて下さい
comments_template
コメントを表示したい箇所に上記テンプレートタグを挿入します。
これはテーマディレクトリ内のテンプレートファイルを読み込むインクルードタグでcomments.phpのテンプレートファイルを読み込みます。
ではcomments.phpテンプレート用意しましょう。
<section class="comments">
<?php
$comment_form_args = array(
'title_reply' => 'コメント投稿フォーム',
'comment_notes_after' => '',
);
comment_form($comment_form_args);
if ( have_comments() ) :
?>
<ol class="commentlist">
</ol>
<?php
paginate_comments_links();
endif;
?>
</section><!-- /.comments -->
こちらはサンプルになります。
代表的なのは、
comment_formです。
この記述により、WordPressが持っている固定テンプレートを表示することができますが、定型のhtmlが出力されてしまうため自由にデザインができません。
この記述だけでも十分コメント欄は表示されますので、
本日は一旦ここまでとします。
次に記事では、具体的コメント欄をカスタマイズしていく方法について記述したいと思います。
超簡単 ハンバーガーメニューの作り方
こんにちはdaissh04です。
今回はハンバーガーメニューの作り方を紹介したいと思います。
前回のレスポンシブル対応に続き、レスポンシブルのスマホのような縮小画面には必ずと行っていいほど実装されている、ハンバーガーメニューの作り方です。
↑こういうやつですね、クリックするとアコーディオンメニューが表示されます。
ハンバーガーメニューの作り方は多くのサイトで紹介されてますが、そのほとんどがjsを使用し、animationを使用して動的なメニュー出現を表現したりしますが、
今回は初心者向けにhtmlとcssで表現できるハンバーガーメニューの作り方を紹介したいと思います。
Inputタグcheckboxとlabelタグ
今回の構造としては、ハンバーガーの横3線をクリックすると、inputタグのcheckboxにチェックが入り、チェックが入るとアコーディオンメニューが表示されるという仕組みで実装して行きます
<input type= “checkbox” id = “check”>
<label for “check”><div= “line”></div><div= “line”></div><div= “line”></div></label>
inputのcheckboxのidにcheckを付与します。labelにfor "check"とすることで、labelを選択してもcheckboxにチェックが入るようになります。
また今回の3本線は空のdivタグを3つ並べて表現して行きます。
そしてinput check boxは必要ないですね、
cssで消します。
#check{
display:none;
}
そしてラインをデザイン
.line{
width:20px;
height:5px
margin:3px;
background-color:black;
}
transform:translateX(50px)
このtransformのcssで、アコーディオンメニューの動的な部分を表現して行きます。
50pxだと右に50px移動
-50pxだと左に50px移動
それをY指定すると縦の動きに変化します。
今回はアコーディオンメニューのクラスをclass = "content"と定義したとします。
.content{
・
・
width:200px;
transform:translateX(200px);
}
これで、contentの幅分移動させ隠すことができます。
ここにさらにinputにcheckが入ったらと言う動作を定義します。
#input 〜 checked .content{
transform:translateX(0)
}
これでクリックされるとアコーディオンが表示できます
あと動的な動きを追加したい場合は
Transition: .3x ease-in-out;を追加して下さい。
ざっくりですが、これがハンバーガーメニューの基礎となります。
初心者向けwebサイトのレスポンシブル対応
こんにちは、daissh04です。
本日はタイトルの通りwebサイトのレスポンシブル対応について書きたいと思います。
私はどちらかと言うと、いきなりパソコンサイズのコーディングから始めるタイプなので、苦手としている分野です。
レスポンシブル対応の必要性について
モバイルファースト
今のwebサイトの設計はこちらが大前提です。Googleのクローラーもモバイル対応しているかどうかで、大きく検索順位に影響を出します。SEO対策をするなら、まずはじめに、レスポンシブルをして置かなくてはいけませんね
上記の関係を受けて、今のWeb制作案件もほとんどとレスポンシブル対応必須になってますね、みなさんブログや、企業サイトもSEOの事を念頭に置いているようですね
そもそも企業ホームページでスマホ画面で画像崩れてたらガックリ来ちゃいますもんね、企業ネームの価値を落としてしまします。
レスポンシブル対応 初歩編
前置きが長くなりましたが、今回は初めてレスポンシブル対応を学ぶと言うかた向けに記事を書きますので、上級者の方は復習がてら見ていてください。
まずはheaderに下記メタコードを書き込んで下さい
<meta name="viewport" content="width=device-width,initial-scale=1.0, shrink-to-fit=no”>
これを書くと以下のサイトはレスポンシブル対応しますよっと言う指令です。
CSSの記述
ブレイクポイントを決めよう！
ブレイクポイントとは、cssのパターンが切り替わるビュー幅です。
例えばスマホ画面を768pxとした場合は、下記のように記述する
@media(max-width:768px){
}
こうすることで、ビューのが768px以下になった時に{}のcssが読み込まれることになります。
適応されてるか素早く確かめる方法は、自分で画面を縮めてみて下さい。あるポイント（vwが768px）で画面レイアウトがガラっと変わるタイミングが確認できるはずです。
レスポンシブルでよく使われるcss
flex-direction:column
要素を縦に並べます。スマホ画面で、要素が横並びになると小さくて見えないですよね、これで写真やブログ記事を縦並びにすることができます。
flex-wrap:wrap
要素を折り返します。
幅が短くなるとテキスト等は自動で行を追加し縦方向に間延びしてしまいます。
それを防ぐため、wrapで要素ごと改行し表示してくれます
これだけで、一般的なスマホ画面になるのではないでしょうか？
自分で画面を縮めてブレークポイントで表示が変わるのを確かめてみて下さい！
次の記事ではレスポンシブルにありがちなハンバーガーメニューについて書きたいと思います！
【WordPress】プラグインの実装 メールフォーム
こんばんはdaissh04です。
だいぶWordPressの記事も増えてきました、今回も学習した内容の備忘録として、記事を書きたいと思います。
話はそれますが、web制作の学習は具体的な目標を設定するに限りますね。こんなwebサイトを作りたい、それを模写するだけでもテンション上がります。
私はLIGというweb制作会社さんの企業ページを密かに模写してテンションあげてます（笑）
では本題に入ります。今回はメールフォームをプラグインを用いて作成するやり方を紹介します。
Contact Form7をインストール
こちらは日本人の方が開発されたプラグインでダウンロード数も高く、信頼度はかなり高いです。
このような問い合わせフォームを作成します。
管理画面のプラグイン→新規追加→Contact Form7で検索し、インストールしてください
このおしゃれな和モダンなデザイン、日本人っぽいですよね！
インストール完了するとメインナビゲーションメニューに「問い合わせ」が表示されます
問い合わせのコンタクフォームに
[contact-form-7 id=" 数値" title="コンタクトフォーム 1"]
と表示されています。こちらをコピーし、固定ページに作成した問い合わせページにこれを貼り付けてください。
このような感じですね。
この時点で問い合わせページにアクセスすればデフォルトで問い合わせフォームがすでに表示されているはずです
送信ボタンを押せばメッセージも出てきます。
フォームのカスタマイズ
デフォルトのデザインでは物足りないので、レイアウトを変更して見ましょう
管理画面→問い合わせ→コンタクトフォームをクリックします
<div class="contactBlock">
<dl>
<dt>お名前 (必須）</dt>
<dd>[text* your-name]</dd>
</dl>
<dl>
<dt>メールアドレス (必須）</dt>
<dd>[email* your-email]</dd>
</dl>
<dl>
<dt>題名</dt>
<dd>[text your-subject]</dd>
</dl>
<dl>
<dt>メッセージ本文</dt>
<dd>[textarea your-message]</dd>
</dl>
<div class="btns">[submit "送信"]</div>
</div>
このようなhtml文が表示さています。
挿入したいタグをを選択すると、それぞれの項目で詳細設定が可能です。
例えば
・メールアドレス
・URL
・電話番号
・テキストエリア
などを挿入することがあります。
それぞれ目指す形を目指して色々触って見てください。
それでは今後ともよろしくお願いいたします！
Adobe XDとは
こんばんはdaissh04です。
本日はAdobe XDについて紹介したいと思います。
Adobe XDを初めて聞いたという方も、存在を知っている方も、
実際に何ができて、Web制作にどのように活かせるのか、という全体像を抑えている人は少ないと思います。
私もその一人でした。XD上でかなり精巧なデザインを作成することができることは知ってましたが、それからどうするのかが分からず、web制作に置いてのメリットを図り損ねていました。
XDに関する説明をいくつか紹介すると
・初めての方にも使えるUI/UXツール
・ユーザー操作性をデザイン、プロトタイプ化、共有するためのプラットフォーム
と、あんまりイメージ湧きませんよね。
なので一日触り倒しました笑
結論からいうとAdobe XDは
コーディングの全前行程をXD一つで全てできる
Web制作の行程を以下とすると
・デザイン設計
・素材（画像、イラスト等）の作成
・クライアントとの合意
・コーディング
XDはデザイン設計、素材の作成、クライアントの合意をカバーできます。
デザイン設計
XDでブログのスマホ画面を設計して見ました。
この程度であれば1時間以内の操作で終わります。
操作もEXCELの図形挿入を触ったことがあれば、すぐにできちゃいます。
更にアートボートというキャンパスにデザインをしていくのでがこのアートボードが数々のデバイスのサイズが用意されてます。 iphoneシリーズから、ipodまでとレスポンス対応を考えると非常にありがたいですよね
作業としても一旦スマホのコンテンツを作成してしまえば、拡大縮小ですぐにできてしまいます。
またスライドショーや、画面の遷移を表現できたりもしますが、ここでは割愛します。
私個人の意見ですが、プロトタイプにどこまで時間をかけるかと考えた時に、そこまで作り込む必要はないかなと感じます。
クライアントの合意
共有という機能を使います。
右上のリンクをクライアントに送信すると
クライアントがこのような画面を開くことができます。
先ほど設計したスマホ画面が表示されてますね。・
そしてコメントのピン留機能もあるので、クライアントがコメントを残してくれます。
この繰り返しをして、デザイン仕様の合意をすることが可能です。
クライアントとしても、より完成形に近い形でデザインを見ることができ、以前のようにPDFや書類に指摘をする必要もありません。円滑なコミュニケーションができますね
CSSの書き出し
ここが一番わかりにくい箇所であり、ただXDがWeb制作に置いてどれだけ貢献できるのかを測る箇所だと思います。
今はXDのデザインからhtmlコードを書き出すことはできません。ただCSSなら可能です。
先ほどの共有の画面からこのようにかく要素のCSSコードを書き出すことができます。
これをhtmlコードを自分でコーディングしてかく要素に当てていくイメージですね
どうでしたか？XDがweb制作に置ける立ち位置を理解してもらえたでしょうか？
残念ながらhtmlとcssを同時に書き出し、webにアップするというところまでは自動化できませんが、web制作の多くの工程をカバーでき、そして工数削減が期待できるのではないでしょうか？
私はこちらを積極的に取り入れて今後の活動に繋げたいと思いってます
【WordPress】プラグインの実装-パンくずリスト
こんにちはdaissh04です。
今回はようやくプラグインの実装を学んだので、その実装方法について記述したいと思います。
まだまだ案件受注には遠いですが、一歩ずつ進められている感は出てきました。
数あるプラグインの中でもポピュラーなパンくずリストの実装をしたいと思います。
Wordpressプラグインについて
プラグインとはWordPressの機能を拡張する為のツールになります
公式プラグイン
から検索可能です。管理画面からもインストール可能です
ダウンロード数や評価が高いものをできるだけ選ぶようにしてください。
それだけ更新頻度も高く、最新のWordPressに対応していると判断できます
非公式プラグイン
こちらは管理画面からインストールすることができません。
プラグインのファイルをサーバーにアップロードする必要があります。
公式のプラグインから検索します。
パンくずプラグイン
管理画面のプラグイン→新規追加→プラグインを追加を選択します。
キーワードにBreadcrumb NavXTと入力して検索して下さい。
いますぐインストールし有効にします
パンくずリストの表示方法
では早速web上に表示させて見ましょう。
表示するにはbcn_display()を使用します。
表示したい箇所に挿入することで、パンくずを表示できます。
header.php
私はheader.phpを各ページに部分テンプレート使用している為、
こちらに記述しました。
function_exists();は引数内の関数が存在するかチェックをします。
もし、パンくずのプラグインを削除したりした場合に、この記述がないと毎回エラー表示されてしまうので、付与すると安心です。
表示されましたでしょうか？
ページ名の区切り文字はデフォルトで >が適用されます。
もし変更したい場合は、管理画面の設定→Breadcrumn NavXTの区切り位置から変更して下さい。
>がデフォルトで表示されていると思いますが、これが">"の意味です。
他の表示方法はありますので、検索して試して見て下さい！
やっとプラグインの実装に入れました。。。長かった。。。
これからも新しいプラグイン実装したら、紹介記事載せますね
頑張りましょう！！
