[WordPress]独自テーマにコメント欄を表示させる方法[初心者向け]

こんにちは、らいどらです。

さあ、いよいよ我がサイトにもコメ欄を表示させる時が来た……..!

ということでさっそく調べてやっていきます。今回は (https://webdesign.practice.jp/wordpress-theme16-comments-php )様と( https://fantastech.net/wordpress-comment-form-cookie-checkbox#outline-2 )様の記事を参考にさせていただきました。

必要なファイル

今回は、個別投稿へのコメント受付なので[single.php]に追記をしていきます。ですが、実際のところ[single.php]への追記はテンプレートタグだけで済ませ、細かい機能などは別途の[comments.php]に記載する場合が多いようなので、私もそちらの方法でやっていきます。

[single.php]への追記はコメントを表示させたい位置に以下のコードをコピペでOK。もちろんdiv要素のclassも変えても構いません。

<div class="comment-fill">
      <?php comments_template(); ?>
</div>

さて、本題の[comments.php]ですが実例を表すとこのサイトのやつがこんな感じ↓

<div id="comment_area">
<?php $args = array(
    'title_reply' => 'コメント',
    'label_submit' => 'コメントを送信する',
    'comment_notes_before' => '<p class="commentNotesBefore"></p>',
    'comment_notes_after'  => '<p class="commentNotesAfter">内容をご確認の上、送信してください。</p>',
    'fields' => array(
            'author' => '<p class="comment-form-author">' .
                        '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' placeholder="ニックネームを入力..." /></p>',
            
            'url'    => '',
            ),
    'comment_field' => '<p class="comment-form-comment">' . '<textarea id="comment" name="comment" cols="50" rows="6"  placeholder="コメントを入力..." /></textarea></p>',
    );
comment_form( $args ); ?>
  
  <?php if(have_comments()): ?>

<ol class="commets-list">
<?php wp_list_comments('avatar_size=48'); ?>
</ol>
<?php endif; ?>
  
</div>

…….申し訳ないです。ほとんど (https://webdesign.practice.jp/wordpress-theme16-comments-php ) 様のコピペでございます。とはいえ、必要な部分はちゃんと変えたから許してくれ…….。

でも、コピペでもなんとかなる理由はちゃんとあります。それはWordPressが勝手に手伝ってくれるということです。

例をあげると、下の画像の赤い下線でチェックボックスがある文。これはcookieを使用する機能ですから、初心者だとちょっと厳しいものがありますが、この文はWordPressが出力させている文になります。

コメント欄に表示されるcookie関係の文

なお、私がCSSでいじったのは送信ボタンだけですので、デフォルトでこれだけの整ったコメントスペースが出てくることにもなります。

要するに、「コメント欄、意外と簡単に表示できますよ?」ってことです。……上から目線ですいません、はい。

コメントスペースの改造

ここからは、コードと実際に出力されたエリアを見比べながら、対応する箇所を軽く解説していこうと思います。

初心者だから憶測なのは許して…….

ソースコード解説用出力側

はい、番号ごとに分けてみました。これをコードファイルの各行に当てはめると…..。

ソースコード解説用コード側

このようになります。⑤は先ほど言ったようにWordPress側の出力なので書いてありません。

構造としては、コメント欄を構成する要素を配列arrayでリストデータ的な感じにしているやつですね。ちなみに改造前はいろんなところに挟んであった[$aria_req]は、その情報を必須入力にするかどうかの関数みたいな感じらしいです。

配列途中にある[url=> ~]の一文ですが、もともとのWordPressでのデフォルトのコメント欄の必須情報は[名前][email][URL]の三つのところを、URLパラメータに何も入力せず[返す(return)]ことによって無効化している….らしいです。

ん?そうなると俺もemailパラメータには空白を入力して返してやることが正解だったのだろうか……。まあいいか。

email入力を不要にする

このサイトの場合はemail入力は不要にしました。

手法として、配列の中にemailパラメータを含めないのに加えて少しやることがあったので追記します。

やることとは、ずばりWordPressの設定です!

なんだよWordPress内の設定で出来ちゃうのかよ…..って思った半日だった。

email入力の必須は設定で決められる

赤下線の文のチェックボックスを外せばOKです。

まとめ

以上、簡素ではありますが我がブログに念願のコメ欄を設置することに成功しました…….!やったー!(スパムは来るなよ……)

意外とデフォルトでもそれなりの形を成してくれるので、ぜひ皆さんもやってみてください!

それでは!

CSSで変更できるマウスカーソル絵一覧

こんにちは、らいどらです。

先日サイトを回覧している時、マウスカーソルの形が思うように変わっていないのに気づきました。あの大文字のI型の奴です。

調べてみると、きちんとCSSで指定しないとだめだということが分かりました。自動でやってくれるわけでは無かったのですね……。

という訳で、今回はCSSで変更可能なマウスカーソルの種類を調べて一覧化してみました。

ではやっていきます!!

cursorプロパティ

カーソルの形を変えるには、CSSの[cursor]プロパティを使います。その後ろに指定する値によって、カーソルの形が変わります。以下が一覧です。

cursorに与える値

alias

all-scroll

alias

allscroll

auto

cell

col-resize

context-menu

copy

crosshair

default

e-resize

ew-resize

grab

grabbing

help

inhirit

initial

move

n-resize

ne-resize

nesw-resize

no-drop

none

not-arrowed

ns-resize

nw-resize

nwse-resize

pointer

progress

row-resize

s-resize

se-resize

sw-resize

text

unset

vertical-text

w-resize

wait

zoom-in

zoom-out

-webkit-grab

-webkit-grabbing

-webkit-zoom-in

-webkit-zoom-out

※調査にはchromeの検証機能を用いました。これで全てという保証はありませんのでご理解ください。

はい!今回調べる限りでは以上です!

見ると、ああ、これ!ってなる奴がいくつもあって楽しかったです(笑)

私の場合はソースコードエリアにカーソルが入った時にI型にしたいだけだったのですが、かなりの量を調べてしまいました…….。

特にロード中を示す青いクルクル。あれが指定できるとは……。サイト全体に指定しておけば、見る人を常にイラつかせるサイトの完成ですね(鬼)。まあそんな酷いことしないですが(笑)

皆さんもサイト制作の際には、用途に応じて正しいカーソルを指定できるようになっておきましょう!

それでは!

[非商用利用]3DCAD 「Fusion 360」のライセンスを更新の仕方

このサイトも、記事数も30を突破しそこそこ本格化してきたので、これからは昔愛用していた3DCADも使っていこうと思います!

ところが、ずいぶん前に入れたのでサブスクライブの期限が切れてしまっていました。具体的な支障でいうと、データ保存ができない…………..。

うん!致命的ですね!

個人利用の場合の更新の仕方

期限が切れると保存も出来ないしなんかいろいろ催促される……。

まあそこは借り物なので仕方ないですが。

Fusion 360 の利用有効期限が切れた!
保存が出来ないのは痛い…….

という訳で、色に釣られてオレンジのボタンを押してみると、今すぐ購入!的なボタンが出てきます。これを押すとAutodeskのサイトに飛びますが…..

実はこれ、罠です。サイトに飛んでも、通常購入の催促させられるだけです。個人利用、というか非営利目的なら、愛好家なんちゃらサービス….?的なのがありまして、それを使えば無償利用できる仕様になっているのです。

なにやら、少し前のアプデが原因で、更新関係が分かりにくくなってしまったのも関係して、誤解する人も増えてしまったっぽいです。

そして正解としては、わざわざサイトに飛ぶまでもなかったです。

オレンジボタンを押すのは変わりませんが、そのあとに「今すぐ購入」ではなく下の白い文章リンクを押してください。

そうすると、使用目的などが出てくるので、順次当てはまるものを押していけば、3ステップぐらいで期限更新が出来ます。

まとめ

わざわざサイトに飛ばなくても、ソフト上の操作だけで期限更新ができるなんて……..

楽でよかったです!!

詳しい方法の解説はこちらのサイトに載っていたので興味がある方はどうぞ。

https://makerslove.com/21631.html

ではでは、設計がんばるぞ~!

Fusion 360の無償利用に関するFAQ(公式サイト) → https://knowledge.autodesk.com/ja/support/fusion-360/troubleshooting/caas/sfdcarticles/sfdcarticles/JPN/Do-I-qualify-for-free-use-of-Fusion-360.html

XML-Sitemapでサーチコンソールのnoindexエラーが出た時の対処法

そう、その事件は唐突に起きた………!

いつものように、何気なくGoogle Search consoleレポートを覗いてみると、なんとそこには禁断の3文字…………..

「エラー」がっ!!!!

カバレッジに出たエラー
エラーだと!?

なんということだ……..やっと安定してきたのに!と、理由を見てみると

「送信されたURLにnoindexタグが追加されています。」と出ています。

noindexタグが問題らしい

※noindex………….SEOを勉強した人ならご存じかもしれませんが、値:noindexはmetaタグで使用され、そのページの内容がGoogleにindexして欲しくない物な時にheadエリアに記述するものです。(具体例:アーカイブページなど)

調べてみると、少し前にXML-Sitemapプラグインで作ったサイトマップが問題だったみたいです。

つまりはindexされなければならないはずのサイトマップにnoindexタグが追加されているので情報収集が困難になっているということでしょうか。早めに直した方がよさそうです。

原因としては、XML-Sitemapの設定で「HTML形式でのサイトマップを含める」にチェックが入っていたのがダメだったようです。いじったつもりは無いので、デフォルトでチェックが入るのかもしれません。

チェックを外す

これで後は、Search Consoleの画面から修正完了/再検証の依頼を出せばOKですね。

数日は掛かるのでそっとしておきましょう。だがブログの更新は忘れるな。

9/11 追記:検証合格です!

検証合格通知が来た
検証合格!だけどそのまま赤いのはちょっと心配になる…….。

参考記事 → https://www.blogging-life.com/how-to-fix-submitted-url-marked-noindex/

MDF/ウッドボードで円形台を作ってみた。

どうもこんにちは!らいどらです。

どこで見つけてきたか分かりませんが、謎の材料が部屋の奥に転がっていました。

柔らかく、DIYに最適!とか書いてあるのでせっかくなのでやってみたかった円形加工に挑戦してみたいと思います!

けがき

けがきって言葉はロボ部の頃から使ってますが、実際どういう意味なんですかね……..?まあ、それは置いといて謎木材に下書きしていきます。

コンパスは久しぶりです。

ちょっとミスったけど出来たの図

さあお次は加工です。

加工

さてさて家は卓上まるのこ盤しかありません。集中…..。

何とか出来た……..。

きつい。音がきついです。あともう一枚……。

出来ました。二枚目は亀裂もないですね。

……..もう糸ノコがめっちゃ買いたくなりました。(-_-)

お次は中心と周囲四点に穴開けしていきます。

君の出番だ!16パイドリル

うおおお!と奮闘した結果、何とかなりました。(苦労あり画像無し)

何とかなった

組み立て~

木ダボをぶっ指していきます。

これを固定しなきゃならんのだが……スペーサーはどうしようか……..。

悩んだ結果、ホームセンターで見掛けたやつを使うことにしました。さあHSにダッシュ!

人が歩いているイラスト
↑ホームセンターに走るの図

なんか銀のままだと合わないので軽く塗装することにしました。

そんな時に便利なのが串刺し塗装!これ天才じゃないですか?

スペーサー+塗料+ハケ
↑串刺し式塗装法

くっついちゃったのでしばらく乾かします。

そしてセット!

出来ました。塗装出来てないって?なに言ってるんですか、もちろんファッションです。

なお真ん中は合うスペーサーが無かったという名の耐久性重視木材スペーサーにしました。

うーん。いろいろ試行錯誤した結果スペーサーに合わせて高さが変わりました。

はみ出た部分を切っていきます。

よし!(終わってる)

木の面にはとりあえずニス塗っていきます。あ、そういえばもう塗ったんだった。(バカ)

では後は無骨な表面を隠すシートを貼るだけです。

さあ恒例の

百均デザインステッカー!!!

今回はでかいやつを買ってきた。前回と違ってシール式な模様。

と勢い勇んだものの丸まっててうまく貼れないので平面化タイム

何とかなりました。良かった~

さあいよいよ貼って行きます!

なお、本体が見えない模様

ボンドで貼りましたが、ミニテーブルの時のステッカーより大きいものを使ったおかげか、色写りはしてないみたいです。

最後に慎重に切っていきます。

完成!!!

良い感じのが出来ました~。やっぱりステッカー貼るだけで大分違いますね。

歪に回る木円台

なお、完全な円じゃないため車輪にはできない模様。

まとめ

今回はMDF/ウッドボードを使って円を作ってみました。材質としては9割がMDFで表面は木という感じでした。

柔らかさとしては中の上ぐらいでしょうか……。特にめちゃめちゃ柔らかい!って感じはしませんでしたが、円を切れるぐらいの融通は効くというところで教訓とさせていただきました。

塗装に関してはもうちょっと頑張った方が良いかもですね………。でもまあ見た目的にはそこそこな物が作れたので良いとしましょう!

それでは!

「焼き桐」を使ってキャスター搭載焼き桐を作る。

移動式焼き桐

こんにちは、らいどらです。

今回はホームセンターをうろついていたら見つけた謎の素材「焼き桐」で試験的にもなにかを作っていこうと思います。

ちなみに選定理由は「なんかかっこ良さそう!」です。

加工

ではさっそく切っていきます。今回作るのは一緒に買ってきたキャスターと絡めて、「ミニ移動台」です。

桐というだけあって持ってみるとかなり軽いです。

切りました。このシックな色がやはり…….良い!

買ったキャスターはネジが短かったのでナットを届かせる為に大きい穴も一緒に開けていきます。

この時点で結構傷がついてしまってます。桐って柔らかいんですね。

↑6パイ+15パイの穴開け

しっかし、15パイのドリルがやっぱり怖いのなんの……恐ろしいです。

組み立て

さあ、やすり掛けが終わったらいよいよ組み立てです。

モーターでもなんでも完成品が動くようになるのはやっぱりワクワクしますね(笑)

出来た!動く!動くぞ~。

と、ここで安心する暇はない。次はニス塗りです。

移動式焼き桐

桐のニス塗りは初めてです。

なんか変わったところが……..あった!?

黒い!黒いよ!?黒いんですけど~!

え、えぇ…………。(乾いても黒かった)

上の穴のごまかしはまたの機会にしますが、まずは側面の切断面をどうにかしていきます。

必殺!百均デザインステッカー!!!

という訳で完成です。(???????????)

焼き桐が動く動画

動いてますね。大丈夫です。案外黒くてもかっこいいかもしれません。(チョロい)。

感想

感想としては「桐、軽くて柔らかいです」。黒いのもいいですが、色有効範囲が表面だけなのが難点ですね。

今回の教訓 → 焼桐にニスを塗ると黒くなっちゃう。

ではまたお会いしましょう!