特典機能について

コメント欄のカスタマイズで立ち往生しています。 | CSSカスタマイズ相談 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
コメント欄のカスタマイズで立ち往生して...
 
共有:
通知
すべてクリア

[解決済] コメント欄のカスタマイズで立ち往生しています。


kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

先日、固定ページにコメント欄を表示させる方法として、

「固定ページの本文内で " square_coment "というショートコードを書く」というアドバイスをいただき、無事解決に至りましたkukukuです。

皆さまにお世話になりありがとうございました。

その後、コメントフォームのカスタマイズを試みているのですが、添付画像のように投稿されたコメント一覧の最後尾に新しいコメント欄<コメントをどうぞ>があるのですが、これを最上部に移動させることは可能でしょうか?

ご指導よろしくお願いいたします!

URL(高速化無効)https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

子テーマCSSに以下を追加。
図示のように赤枠と青枠の表示順を逆にします。

.comment-area {
  display: flex;
  flex-direction: column-reverse;
}

 


わいひらkukuku 件のいいね!
kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@chu-ya さま、

連日お世話になり恐縮です。

また、早々の回答ありがとうごさいます!

CSSの記述でスッキリ解決致しました。

ありがとうございました。


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@kukuku さん

CSS ではアクセシビリティ(サイトを支障なく使えるかどうか)に問題が発生するため、私であればテンプレートを作成します。

CSS でのアクセシビリティの問題は、以下のページに書かれています。

flex-direction - アクセシビリティの考慮 - CSS: カスケーディングスタイルシート | MDN

視覚障害者と書かれていますが、視覚障害者に限らずキーボードで操作する方にも不利な影響を及ぼします。実際に現在の状態のままページを表示した後、tab キーを押してページ内の移動をお試しください。コメントフォームを飛ばして大きく下に移動し、コメント一覧のコメントにフォーカスが当たります。また、コメント一覧の後では、今度は上に大きく移動しコメントフォームにフォーカスが当たります。これは支障があると思います。

この問題を避けるために、まずは子テーマに 1 つファイルを作り、ファイル名を square-comment.php とします。

※ FTP ソフトやサーバーのファイルマネージャーをお使いになり、子テーマの style.css や functions.php と同じ階層にファイルを作ります。ロリポップのファイルマネージャーは、おそらく ロリポップ!FTP だと思います。

そして、square-comment.php に下記リンク先のコードを追加します。

https://notepad.pw/share/tks1dash1

※ 中身は親テーマの comments.php とほぼ同じです。

最後に、以前に子テーマの functions.php に追加したコードを削除し、新たに以下のコードを追加します。

add_shortcode( 'square_comment', function() {
  get_template_part( 'square-comment' );
});
This post was modified 2週間前 by Akira

わいひらchu-ya 件のいいね!
kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

Akiraさま、

アクセシビリティの問題、ご指摘ありがとうございます。

私にはハードル高すぎて、とりあえずご指示のようにファイルの作成、コードの書き換えを実行致しました。

が、添付のような結果になってしまいました!

きっと何か基本的な所をミスっているのだと思い何度も検証していますがわかりません。

またまたお手数おかけして申し訳ありませんが、再度お力添え下さい!

現状URL:  https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/

 


chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

@kukuku さん

●手順補足

  • リンク https://notepad.pw/share/tks1dash1 のコードをコピペし、「square-comment.php」と言う名前でファイル作成。
  • サーバの子テーマのディレクトリ/wp-content/themes/cocoon-child-master/下に、作成した「square-comment.php」をアップロード。
  • 以前、function.phpに書いたコードを置き換える
add_shortcode( 'square_comment', function() {
  comments_template();
});

↓前のコードを以下に置き換え

add_shortcode( 'square_comment', function() {
  get_template_part( 'square-comment' );
});
  • コメントを表示したいページに、前回と同じ以下のショートコードを記述する。
[square_comment]

 

 


わいひら 件のいいね!
kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@chu-ya さま、

ご連絡遅くなりました。

お手間を取らせています。
手順を要約して頂きありがとうございます。

最初はDreamweaverからサーバーにアクセスし、square-comment.php」のアップロードと
function.phpの書き換えを実行し、
先ほど、ロリポップのFTPで同じ処理を致しました。

が、全く結果は同じ全面文字化けです。

きっと何か基本的な所をミスっているのだと思いますが  
私の知識では全くお手上げです。

固定ページに掲示板機能を…というところから見直した方が良いのでしょうか。


Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@kukuku さん

ファイルの文字コードが原因かもしれません。

このような手順で行うとどうなるでしょうか。

① 現在ある square-comment.php ファイルを削除します。

② ロリポップ!FTP でファイルを作成します。

参考:ロリポップ!FTP(ファイルの作成、編集、ダウンロード)

「ファイル名」に square-comment.php と入力します。

「文字コード」は何を選べるのか分かりませんが、utf-8 が選べるのなら選びます。

「ファイルの属性(パーミッション)」は、とりあえずデフォルトの 644 でいいと思います。

「編集画面」に https://notepad.pw/share/tks1dash1  のコードをコピペします。


わいひら 件のいいね!
chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

@akira さん

根本原因が何か?元ファイルを何で作ったか気になる点ですが。

ワードプレス上で
[ダッシュボード]→[外観]→[テーマファイルエディタ]→square-comment.php

既にあるファイルにソースコード(テキスト)をコピペして上書き保存。
でもいいのは?


わいひら 件のいいね!
kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@akira さま、

chu-ya さま、

 

見捨てずお付き合い頂きありがとうございます!

ダッシュボードーテーマファイルエディタでの記述も

ロリポップでのファイル作成(utf-8)も同じように文字化けしました。(ファイル添付)

他に策がありましたらよろしくお願いいたします。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3492
 

kukukuさん

文字化けは治りましたね。

問題は、PHPソースと認識されないために、実行されずに、ソースの中身が表示されてしまっていることだと思います。

拝見すると、?マークが全角になってしまっています。
(1箇所ではなく、多数。)

少なくとも、「<?php」(すべて半角)で始まらないと、認識されないと思います。

作成したPHPファイル上でも、全角なのでしょうか。

ご確認いただけますでしょうか。
(他にも文字が変換されていないか、確認が必要かもしれないです。)


わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3492
 

kukukuさん

あと、表示されているので変なのは変数名だと思います。

$マークの後ろに、スペースがあります。

例えば、本来「$user」のものが、「$ user」と$マークの後ろにスペースが入っています。

これも1箇所ではなく、多数なっています。

これらも、作成したPHPファイル(square-comment.php)上では、間にスペースが入っているのでしょうか。

それとも、PHP上は問題なくて、表示されているだけでしょうか。

 

もし変換されているようであれば・・・。

?マークや$マークの件が、変換されずに、そのままを貼り付けることができれば、今の方法で上手くいきそうに思います。

 


わいひら 件のいいね!
kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@mk2_mk2 さま、

ご連絡ありがとうございます。

全角?を全て半角?に変換しUPしたところ
「重大なエラー発生しました」と表示されこのページにだけアクセスできなくなりました!

WPからのメールでは下記のようになっています。

エラー詳細

===============

エラータイプ E_PARSE /home/users/0/daa.jp-nmos-shayukai/web/new/wp-content/themes/cocoon-child-master/square-comment.phpファイルの 18 行目で発生しました。 エラーメッセージ: syntax error, unexpected 'req' (T_STRING), expecting variable (T_VARIABLE) or '{' or '$'

指摘されている18行目あたりのコピー添付いたします。

いずれにせよ、一度 square-comment.phpを削除して出直さなければならないですね。


kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@mk2_mk2 さま、

ご指摘のように$の後にも半角スペースが入っていたりします。

明日は朝から終日出かけますので、php の全角、スペースなどを整理してから
ご報告させて頂きますのでよろしくお願いいたします。

明日の朝早いので今日はこれにて失礼いたします。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3492
 

kukukuさん

とりあえずエラーメッセージは、PHPと認識されたために出力されているように思います。
(変数に$がないため、文法的にエラーとなった)

先程エラーメッセージを記載いただいた返信に、貼っていただいた画像を拝見すると、他にも問題ありそうです。

  • 半角の括弧「()」が、全角の括弧「()」に、なっているように見えます
     
  • 半角のカンマ「,」が、全角の読点「、」になっているように見えます
     
  • 半角のピリオド「.」は、全角の句点「。」になっているように見えます

 

これまでの経緯を拝見する限り、貼り付け方に問題がありそうです。

例えば、WordやExcelなどに一旦貼り付けて、オートコレクト機能が働いて自動変換。
それを貼り付けた。

そんな風に見えてしまいます。

 

ここまで、変換されている文字が多いと、他にも変換された文字がないか確認するのは大変だと思います。

やり直した方が確実かと思います。

 

直接貼り付けても、こういう状態になってしまうのでしょうか。

そうであれば、文字コード「UTF-8(BOMなし)」を扱えるテキストエディタをご利用になった方が良いのかもしれないです。

 

そうでなく、何かを経由してこうなったのであれば、直接貼り付けた方が良いと思います。

 

今後のことを考えれば、テキストエディタをご利用になれる状態にしておくのが、良さそうには思います。


kukukuわいひら 件のいいね!
Akira
(@akira)
Noble Memberサイト
結合: 4年前
投稿: 1014
Akira - FacebookAkira - Twitter
 

@kukuku さん

php の全角、スペースなどを整理してから

整理するのではなく、ファイルを削除し作り直すのがいいです。

そのようなことになる理由が分かりませんが、コードは以下のリンクから直接ファイルに貼り付けてください。

https://notepad.pw/share/tks1dash1

mk2さんもおっしゃっていますが、別の何かに貼り付けた後で、その別の何かからファイルに貼り付けるのはお止めください。

もし、コードの変更など別の何かに貼り付ける必要がある場合は、Visual Studio Code などのコードエディターをお使いください。Visual Studio Code は オンライン版 もありますので、すぐに使えます。


kukukuわいひら 件のいいね!
chu-ya
(@chu-ya)
Estimable Member
結合: 3か月前
投稿: 206
 

問題の本質、直接的原因(動作の問題)より、仮に「なぜ全角が混入」したのか?動機的原因が問題。
これを明確にしないと、同様の繰り返しかと...


kukukuわいひら 件のいいね!
kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@akira さま、
mk2 さま、
chu-ya さま、

大変返信が遅くなり申し訳ありません!
そしてまた、私のケアレスミスが発覚しましたこと、ご報告いたします。

コードの貼付けは案内いただいているnotepadから直接コピペしていたのですが、
リンク先のコードが表示されると同時にgoogle翻訳が作動して英語⇒日本語に変換されているのに気付いていませんでした!
コードが半角でなければならない…ということは知ってはいましたが、全角になっていたという事実に気づいておりませんでした。

本当にお騒がせいたしました!!!

というわけで、無事イメージ通り表示され(タブ移動も問題無しです)、皆さまの数々のご支援に感謝申し上げます。

https://new.nmos-shayukai.com/%e3%81%bf%e3%82%93%e3%81%aa%e3%81%ae%e5%ba%83%e5%a0%b4/

またこのフォーラムの中をウロウロお邪魔することと思いますので、今後ともよろしくお願い申し上げます。


わいひら 件のいいね!
mk2
(@mk2_mk2)
メンバー Moderator
結合: 1年前
投稿: 3492
 

kukukuさん

上手くいって良かったです。

投稿者:: @kukuku

google翻訳が作動して英語⇒日本語に変換されている

これは盲点でした。
(ブラウザの翻訳機能ってことですよね)

そんなケースもあるんですね。
記憶しておこうと思います。


kukuku
(@kukuku)
Active Member
結合: 2週間前
投稿: 13
Topic starter  

@mk2_mk2 さま、

ご指摘、本当にありがとうございました。

私もこの事実に気が付いたときはぎょッといたしました。


共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは7日以内なら無料自動復旧可能
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
×DBは手動で復旧(データ取得は無料)
×ファイルも手動で復旧(データ取得は無料)
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
×ファイルは手動復旧(データ取得は無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:6年

Cocoon
タイトルとURLをコピーしました