サイト全体に「COLORS(ブルー)」スキン適用中。

記事ページのh1に特定の文言を追加したい | カスタマイズ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因がわからない不具合が出た場合のトラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 画面が真っ白になった際のエラーメッセージの確認方法 

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク

[解決済] 記事ページのh1に特定の文言を追加したい  

  RSS

Jimon
 Jimon
(@Jimon)
ゲスト
参加: 1か月 前
投稿: 8
2019年2月6日 03:43  

お世話になります。

記事タイトルが長く読みづらくなってしまう理由から、h1タグの文言と記事一覧などで表示されるタイトル表示を別にできないかと思い、質問させていただきました。

ご教授いただけると幸いです。

〇イメージ例

記事外(ウィジットの新着記事など) → タイトル

記事内(title + h1) → 【追加文言】タイトル【追加文言】

 


未解決
かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1864
2019年2月6日 07:20  

実際やってみないとわかりませんが、『特定の文言』を入れるのであれば、できなくないかもしれません。

  • もっと具体的なご説明があればと思いますが、実際のURLをご提示ください。
  • またビフォーアフターの画像があれば、伝わりやすいと思います

該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

 

投稿ページの記事一覧に追記したい場合

.single .entry-title:before {
	content: "かうたっく";
}
.single .entry-title:after {
	content: "ぁぁかうたっく";
}

https://gyazo.com/8655876864377d139c451926a04db072

見た目的に ↑ビフォー

↓アフター

https://gyazo.com/273f884cf43994082ffedf7c1132a6f1

 

あとは投稿ページ毎に『SEO設定』を行うなどかもです。

検索エンジンに表示させたいタイトルを入力してください。記事のタイトルより、こちらに入力したテキストが優先的にタイトルタグ(<title>)に挿入されます。一般的に日本語の場合は、32文字以内が最適とされています。(※ページやインデックスの見出し部分には「記事のタイトル」が利用されます)

https://gyazo.com/2936f326493b3e4f8166fc63b1832166

※やりたい事自体がいまいち把握できてませんが。


わいひら 件のいいね!
Jimon
 Jimon
(@Jimon)
ゲスト
参加: 1か月 前
投稿: 8
2019年2月6日 07:46  

かうたっくさんご返答ありがとうございます。説明が分かりづらく申し訳ございません…

1. h1タグ+SEO設定は従来通り入力したテキスト。

https://gyazo.com/dad4a332491a99dcd981cc8722b4b615

2.ページ外の表記では、特定の文言が抜けている状態にしたいと思っています。

(今回の場合は【MTG】【MTGアリーナ】)

ウィジットの新着記事一覧↓

https://gyazo.com/869077ec5bb83dadce8e3bd220e61f10

インデックス記事の表示↓

https://gyazo.com/b2b5d8e37cf26117a3b081cc59bc6ef5

しかし、現状のままではそれらにも文言が入ってしまう状態です。

https://gyazo.com/07962db75c5ba3207e1ec8f33f287e81

頂いたソースコードを使ってみたところh1タグにKWが入らない、表示が崩れるといった結果でした。 https://gyazo.com/5eb138bedf5755ec15082a9f1ac3f9a0

下記は環境情報となります。

----------------------------------------------
サイト名:UNTAPPED
サイトURL: https://jimongg.online
ホームURL: https://jimongg.online
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.0.3
PHPバージョン:7.1.5
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.8.5
カテゴリ数:5
タグ数:8
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
Gutenberg:1
ホームイメージ:/wp-content/uploads/2018/12/1.png
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:1
CSS縮小化:1
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.1
Classic Editor 1.4
Google XML Sitemaps 4.1.0
Imagify 1.8.4.1
Lazy Load 0.6.1
PWA for WordPress 1.1.4
Really Simple SSL 3.1.3
Save with keyboard 3.0.2
Search Regex 1.4.16
SiteGuard WP Plugin 1.4.3
TinyMCE Advanced 5.0.1
WordPress Popular Posts 4.2.2
WP Multibyte Patch 2.8.2
----------------------------------------------

かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 11か月 前
投稿: 1864
2019年2月6日 09:22  

説明が分かりづらく申し訳ございません…

いえ。サイトを運営されてる方は、じっくりご自身のサイトをずっと見てきてるので、説明が簡単になると思います。

その状態を全く知らない第三者が、数行の説明を数分で見れば、そうなるものだと思うので。詳細を伝えるのは難しいだなって思います。

 

1. h1タグ+SEO設定は従来通り入力したテキスト。

https://gyazo.com/dad4a332491a99dcd981cc8722b4b615

2.ページ外の表記では、特定の文言が抜けている状態にしたいと思っています。

すくなくとも、上述したCSSは、元々端的なタイトルを記事上にあるタイトルに記載し、追記する方法になります。

https://gyazo.com/bf23e1b4899e394707490132c93bc22c

 

記事外(ウィジットの新着記事など) → タイトル

記事内(title + h1) → 【追加文言】タイトル【追加文言】

『記事を表示』したときの『タイトルのみ』追記を行いたいって認識ですが。

「記事内(title + h1) → 【追加文言】タイトル【追加文言】」

上記CSSで追記されてませんか?

 

頂いたソースコードを使ってみたところh1タグにKWが入らない、表示が崩れるといった結果でした。  https://gyazo.com/5eb138bedf5755ec15082a9f1ac3f9a0

どこのページをご覧になってますか?

コチラで簡単にできる事はやりますが、上記どおり『実装結果をどうしたいか』が不明です。

 

有料でもやってもらえる件だと思いますが、実装結果をどうしたいかが不明であれば、有料でもごめんなさい。となるかと。単刀直入にいえば、やり取りだけが続くのはお互いシンドイと思います。

 

結果的にどうしたいか。3分でわかる内容をご提示いただけますか?

それでやっと10分・15分かけて、どういう実装をしたいのかを把握できる感じだと思います。どこまで時間を捻出するか、お互い考える面もあるかもですが。

Gutenbergで出力されたものも、同じHTMLだとおもいますが、現在どのページを確認すべきか?ってことで拝見しておりません。

どのページでどこをチェックし、何をすれば良いか。いってください。

早めに解決できればと思いますが、不明点があれば、次のご返信は書き込みなしでそっとおきますね‥

  1. 不具合・カスタマイズ対象ページのURLを提示してください

わいひら 件のいいね!
たなかま
(@tanakama)
Estimable Memberサイト
参加: 11か月 前
投稿: 171
2019年2月6日 11:12  

こんにちは。

いろいろな方法がありそうですが、カスタムフィールドでh1を書き換えるのがラクに実装できそうですね。

子テーマ > tmp > content.php の27行目あたりのh1を書き換えます。


<h1 class="entry-title" itemprop="headline">
<?php $ctm = get_post_meta($post->ID, 'h1タイトル', true);?>
<?php if(empty($ctm)):?>
<?php
if (is_wpforo_plugin_page()) {
echo wp_get_document_title();
} else {
the_title();
}
?>
<?php else:?>
    <?php echo post_custom('h1タイトル');?>
<?php endif;?>
</h1>

この場合、カスタムフィールド名は「h1タイトル」です。

これで記事だけのh1をカスタムフィールドの値に変更可能です。


わいひら 件のいいね!
Jimon
 Jimon
(@Jimon)
ゲスト
参加: 1か月 前
投稿: 8
2019年2月7日 05:10  

なるほど、かうたっくさんから頂いたコードは表示そのものをいじるものだったのですね。

頂いたソースコードを使ってみたところh1タグにKWが入らない、表示が崩れるといった結果でした。  https://gyazo.com/5eb138bedf5755ec15082a9f1ac3f9a0

記事タイトルのデザイン崩れが起きたのは、表記のみを変更したため、h1タグの文字として認識されていなかったことが原因のように思います。
(もし、h1タグに挿入されるコードであったのなら、別の原因がありそうですが...)

説明がおぼつかず混乱させてしまい申し訳ありません。
今後は他の方の質問なども参考にして善処いたします。


Jimon
 Jimon
(@Jimon)
ゲスト
参加: 1か月 前
投稿: 8
2019年2月7日 05:17  

たなかまさんご返答ありがとうございます!無事に実装できました!

もし追記以外の方法を取るのだとすれば、記事外のタイトルから文言を取り出すといった形になりそうですが、変更を加える箇所が多そうですね...

ご教授いただきありがとうございました。

 


わいひら 件のいいね!
Share:
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

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

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

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon
  
動作中

ログイン または 登録 してください

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