トップページの記事一覧にて、投稿タイトルの任意の場所に改行を入れたいです

このトピックには21件の返信、2人の参加者があり、最後にえりにより10年、 10ヶ月前に更新されました。

21件の返信スレッドを表示中

投稿者

投稿
- 2015年12月4日 6:16 AM #34225
 
 えり
 ゲスト
 
 いつもお世話になっています。エリーともうします。
 
 先月よりWordpressをゼロから学び始めた超初心者です。
 Simplicityがとても使いやすいので、（全く改造していないのですが）使わせてもらっています。
 ありがとうございます。
 
 質問なのですが、Simplicityのトップページにおける記事一覧で、
 任意の場所に改行を入れた形に表示したいのですが、
 どのファイルを編集したらよいか教えていただけますでしょうか？
 
 投稿の各ページでは以下のサイトをもとに、
 自分で編集ファイルを探してうまく対応できたのですが、
 どうしてもトップページでそれが反映されません。。
 
 http://wadajuku.jp/archives/szk/20130927-2
 
 entry-body.php の
 <!– <?php the_title(); //投稿のタイトル?> –>
 ここを下のラインに入れ替えた。
 
 <?php
 $title = get_the_title($ID);
 $title = str_replace(” “, “ ”, $title);
 echo $title;
 ?>
 
 ちなみに、そもそもこれを行いたい理由は、
 もともとWordpress投稿ページのタイトルにを入れていたのですが、
 他のサイトにリンクを貼る時など、タイトルの間にが出てきてとても見づらかったからです。
 
 お忙しいところお手数ですが、教えていただけますと嬉しいです。
 
 よろしくお願いいたします。
- 2015年12月4日 7:41 AM #34226
 
 Hidekichi
 ゲスト
 
 投稿ページタイトルを指定した場所で改行したい
 
 3日ほど前に同様の質問がありましたので、いくつかサンプルを掲載しました。参考までに。
- 2015年12月4日 8:48 AM #34227
 
 えり
 ゲスト
 
 >Hidekichiさま、
 早速のお返事ありがとうございます！
 
 リンク先を見させていただき、サンプルも確認しました。
 頂いた以下リンク先の jQuery を子テーマの javascript.js に入れて試しました。
 
 サンプル: ページ内に複数のタイトルがある場合の対応 | jsFiddle
 
 結果、トップページのタイトル表示は半角スペース2つ分でもうまく改行され、
 キレイに見れるようになったのですが、
 今度は投稿先の各ページに行くとタイトルの上にスペースが空き、
 さらに改行がなくタイトルが表示されるようになってしまいました。。。
 
 何度も申し訳ないのですが、ご教示いただけますと幸いです。
 
 よろしくお願いします。
- 2015年12月4日 10:08 AM #34228
 
 Hidekichi
 ゲスト
 
 状態がどうなっているかにもよるのですが、例えばカラの.entry-titleがあるとか、あるいは、
 
 [h2 class=”entry-title”] 何かしらのテキストその続き[/h2]
 
 このような感じで、タイトルの前に半角スペースが入っているとか。
 
 > 今度は投稿先の各ページに行くとタイトルの上にスペースが空き
 
 何が原因かはサイトを見てみないとわからないんですが、例えば使用例として僕の想定では、
 
 記事のタイトル
 posat-meta
 記事本文
 
 こういう構造を最初に想定していたのですが、リンクのトピックでは、記事内に各タイトルが別途h2とかh3であるのか、複数の.entry-titleがあるような状況だったので(そんな感じだったので)そのような感じに作りなおしました。それがえりさんが参考にされたサンプルです。
 もしかしたら、全文表示のリストスタイルなのかも知れません。
 
 例えば、
 
 記事のタイトル
 posat-meta
 記事本文
 
 こういう状況であれば、.entry-titleは、記事のタイトルにだけついてるかと思いますので記事タイトルの半角スペースをbrに変換する(複数スペース対応版) | jsFiddleの方で対応できるかと思います。
 
 スクリプトの仕組みとしては、
 
 .entry-titleがついているセレクタのテキスト(記事タイトル)を抜き出し、そこに含まれている半角スペースをbrで置き換えると言うスクリプトです。
 
 なので、先の例のように、
 
 [h2 class=”entry-title”] 何かしらのテキストその続き[/h2]
 
 こういう状態であれば、
 [h2]
 [br]
 何かしらのテキスト
 [br]
 その続き
 [/h2]
 こういう出力になります。h2のタグの後半角スペースが入っているので最初の半角スペースが改行になってタイトルの手前にスペースができてしまいます。なので、
 
 [h2 class=”entry-title”]何かしらのテキストその続き[/h2]
 
 このようにして、タグの中のテキストの先頭にある半角スペースを取り除かないといけません。
 
 スクリプト自体の仕組みはこの通りなのですが、えりさんが適用されたと思われる、「ページ内に複数のタイトルがある場合の対応 | jsFiddle」は、記事内に、例えば
 
 [h2 class=”entry-title”]記事のタイトル[/h2]
 [h3 class=”inentry-title”]記事内のタイトル[/h3]
 その本文
 [h3 class=”inentry-title”]記事内のタイトル[/h3]
 その本文
 [h3 class=”inentry-title”]記事内のタイトル[/h3]
 その本文
 
 このような場合に、hQueryのセレクタ部分を.inentry-titleにすることで、記事内の複数のタイトルに半角スペースをbrに置換する内容となっています。
 
 セレクタ.each(function(){
 //処理
 });
 
 これは、それぞれのセレクタに対して行う処理で、$(“.entry-title”).text().replace(ptn,replace)は、.entry-titleのテキストをptnでreplaceする内容となってます。
 
 仮に記事の投稿タイトルにだけ、処理をさせたいのであれば、投稿のタイトルを他とかぶらないセレクタに変えるというのも方法の一つです。
 
 entry-body.phpの[h1 class=”entry-title”]を例えば、[h1 class=”entry-title ex”]と言うようなセレクタにします。jQueryでは、
 
 $(“.entry-title.ex”)、あるいは、$(“.entry-title”).hasClass(“ex”)などとして、スクリプトを書き換えればそのセレクタ専用になります。
 .exをつける理由としては、.entry-titleのcssのスタイルをそのまま利用できるからです。新しいセレクタを付けてしまうとそれ用にcssもスタイルしなおさなければなりません。
 
 現状の状態がどうなっているのかがわかれば、サックリ答えがわかるかと思うんですが、スペースがあるだけではその原因は何とも言えない部分です。
- 2015年12月4日 10:09 AM #34229
 
 Hidekichi
 ゲスト
 
 × このような場合に、hQueryの
 ◯ このような場合に、jQueryの
- 2015年12月5日 9:14 AM #34236
 
 えり
 ゲスト
 
 >Hidekichiさま、
 お返事遅れすみません。。
 詳細に説明いただき、大変助かります。
 
 もう一度最初からやり直そうと思って、
 entry-body.php の
 <?php the_title(); //投稿のタイトル?>
 ここを以下に入れ替えたあと、
 
 <?php
 $title = get_the_title($ID);
 $title = str_replace(” “, “”, $title);
 echo $title;
 ?>
 
 さらにHidekichiさま作成の以下jQueryを、javascript.jsに入れてみました。
 (function ($) {
 $(function () {
 var ptn = / /g,
 replace = ”;
 $(“.entry-title”).each(function(){
 var title = $(this).text().replace(ptn, replace);
 $(this).html(title);
 });
 
 });
 })(jQuery);
 
 すると今度は、
 投稿ページはちゃんと半角スペース2つ分でも改行できて見えたのですが、
 トップページは何も変更がなくなってしまいました。。
 変更がないというと語弊があるのですが、
 半角スペース2つ分を、半角スペース1つ分として認識しているようでした。
 例えますと、
 タイトルがこんな感じ
 
 Wordpress内では上記のようにタイトル記入したのですが、トップページでは
 
 タイトルがこんな感じ
 
 このように半角スペースが一つ空いただけで、改行されずに表示されていました。
 投稿ページではちゃんと半角スペース2つと認識されたようで、
 
 タイトルが
 こんな感じ
 
 と表示されたのですが。。。
 
 なにかおかしな操作をしてしまったのかもしれませんが、
 もし想像がつく問題点・解決策をご存知でしたら教えていただけますととても助かります。。。
- 2015年12月5日 10:33 AM #34237
 
 Hidekichi
 ゲスト
 
 > トップページは何も変更がなくなってしまいました
 
 ここをもう少し説明してもらいたいのですが、
 $title = str_replace(” “, “”, $title);
 
 こうすると、いわゆるタイトルの半角スペースを取り除いているように思うのですが(半角スペースかどうかは不明。何かしらのスペースを無くしている)、そうすると、
 
 →タイトルが_こんな感じ
 
 このようにあった時(_が半角スペース)、PHPによって、
 
 →タイトルがこんな感じ
 
 このように、半角スペースがなくなってしまうと思うんです。そうすると、その後で実行されるjQueryでは、半角スペースがないので動作しないと思うんです。
 
 PHPはサーバー側でhtmlを作る処理をしているので、もしデータベースに「タイトルが_こんな感じ」にタイトルが入っていたとして、
 
 [データベース読み込み] タイトルが_こんな感じ
 [PHP処理] タイトルがこんな感じ
 [ 〃 html出力] [h2 class=”entry-title”]タイトルがこんな感じ[/h2]
 [jQuery処理] タイトルがこんな感じ ←半角スペースがないのでスルー
 
 こうなるんじゃなかろうかと。
 
 僕の想定では、例えば「タイトルに折り返しが欲しい」と考えた時、折り返す部分はどこかを考えるとして、必ずタイトルの前に定形の文言がある場合、
 
 [前置き]タイトル
 
 こういうスタイルであれば、]の後にbrを挿入すればよいわけで、何文字かの後必ず折り変えというのもその数値の後brの挿入と、結局brを入れるんですが、任意の場所で折り返すとなると、タイトル自体を工夫して
 
 aaaa bb ccccc dddd
 
 と言うようなスペースを入れておけば、共通なスペースでbrを入れれば任意の位置で折り返せると言う仕組みにしてあります。
 jQueryを利用する意味としては、元のPHPを何もいじらなくてもjQueryの実行できる状態にあれば、任意の箇所で折り返しができ、かつjQueryが実行できない状態では通常のタイトルに半角スペースが入っているだけという事で特別おかしな表示にならないと言うのがそのメリットであり使用理由です。
 
 この半角スペースは、任意の文字や文字列で置き換えることができますが、タイトルに入れて邪魔にならないのは半角スペースぐらいではなかろうかと思ったりもしています。
 
 各投稿ページも、トップページのリストも.entry-titleが入っています。違いとしては、各投稿ページには1つだけしか.entry-titleがなく、トップページのリストはそれぞれの記事のタイトルとして記事分の数の.entry-titleがあるということです。
 
 #34228でのリンクのサンプルは、1つの.entry-titleの場合の処理です。
 トップページに対応する場合は、複数の.entry-titleの場合の処理が必要です。
 
 そのため、それぞれ似合うように、2つの処理を入れて厳密に処理を分離しても良いですが、基本的には、最初の、
 
 サンプル: ページ内に複数のタイトルがある場合の対応 | jsFiddle
 
 これを利用するべきかと思います。
 
 投稿ページ、トップのリスト表示それぞれの場合は、
 
 $(“#list .entry-title”).each(function(){
 //中身の処理は同じ
 //ただし、それぞれのセレクタとして$(this)を利用
 });
 
 $(“.article .entry-title”).text()….
 
 などとして、分けることもできます。どちらか一方だけ利用したい場合は、そのセレクタを厳密に指定してやる必要があります。
 
 複数の.entry-titleがある場合のサンプルでは、.entry-titleそれぞれに対して処理を行うので、投稿ページもトップページのリストもどちらも対応できます。
- 2015年12月5日 1:05 PM #34240
 
 Hidekichi
 ゲスト
 
 × それぞれ似合うように
 ◯ それぞれに合うように
- 2015年12月5日 6:55 PM #34245
 
 えり
 ゲスト
 
 >Hidekichiさま、
 お返事ありがとうございます。
 
 データベースの読み込みからjQueryの処理まで、
 わかりやすい流れを教えていただきありがとうございます！
 本当に初心者なので、このようにご説明いただくととても助かります。
 
 すみません、あとこのページが半角スペースを2つ記入しても、
 表示される際は1つにしかならないことを知りませんでした。
 正しくは以下のように記入していました。（_の部分が半角スペースです）
 
 <?php
 $title = get_the_title($ID);
 $title = str_replace(”__“, “ ”, $title);
 echo $title;
 ?>
 
 私のentry-body.phpへの上記PHP編集は不要で（entry-body.phpのファイル内容は元通りにしました）
 教えていただいたjQueryをjavascript.jsへ記入すれば解決する、
 という理解で処理を行ったのですが、
 今度はトップページ・投稿ページ両方で反映されなくなってしまいました。。。
 
 何度もお手数ですが、半角スペース2つ分でも処理できるものか、ご教示いただけますと幸いです。
- 2015年12月5日 7:24 PM #34248
 
 Hidekichi
 ゲスト
 
 半角スペース2つをbrに変換したいのであれば、
 var ptn = / /g,
 
 の部分の//gの中を半角スペース2つにすればよいです。
- 2015年12月5日 7:58 PM #34250
 
 Hidekichi
 ゲスト
 
 /__/g
 
 _ ←1つが半角スペース
- 2015年12月5日 8:02 PM #34251
 わいひら
 キーマスター
 その他の1例として。
 タイトル部分が全て変換されてしまいますが、タイトル出力部分を全てフック処理するには、以下のようにもできます。
 以下をfunctions.phpに追記。
```
function the_title_in_br( $content ) {
 return str_replace(" ", " ", $content);
}
add_filter('the_title', 'the_title_in_br');
```
 the_title関数を利用してテンプレート内で出力されている部分は、全て改行されます。
 改行を、投稿ページタイトルとリストタイトル部分のみに限定するなら、それ以外のタイトル部分の をCSSセレクタで指定してでスタイルシートで非表示にしてもいいかもしれません。
- 2015年12月6日 2:28 AM #34254
 
 えり
 ゲスト
 
 >Hidekichiさま、わいひらさま、
 お忙しいところ色々とありがとうございます！
 
 なんとか半角スペース2つ分を に置き換えられたのですが、
 やはりGoogleの検索画面なのではタイトルに と表示されてしまいました。。
 
 お手数ですがわいひらさまのCSSセレクタで非表示？という方法をご教示頂いてもよろしいでしょうか？
 また、この方法によって非表示にすると、Google検索画面やFacebookのシェアの際、
 が消えて表示されるかどうか、（自分でももちろん試しますが）
 ご存知でしたらご教示くださいますと嬉しいです。
 
 何卒よろしくお願いいたします！
- 2015年12月6日 8:34 AM #34255
 
 Hidekichi
 ゲスト
 
 > Googleの検索画面なのではタイトルに と表示されてしまいました
 
 Googleの検索結果はすぐには更新されないのでは？
 おそらくGoogle-botはjavascriptも実行できるような高性能なやつかとは思うんですけれども、収集している情報はhtmlだろうと思うんですよね。
 
 その場で実行して実行した結果を収集しているかどうかは僕も定かではないですけれども、htmlだけをもし収集しているなら[title]記事のタイトル | サイトの名前[/title]←例えばこういうheadのタグを収集しているのではないかと思ったり。
 
 javascript(jQuery)は、jQueryが実行されないと結果が出ないので、その前のhtmlを収集しているならタイトルは半角が入った状態でしょうし、実行後のhtmlを収集しているならbrが入った状態を収集していると思われます。
 
 ここらはGoogleの仕様次第なんですけどね。
 PHPで書き出すと、前のレスで書いたようにサイトを構成するhtmlを出力する段階でbrが入ります。なのでbrが検索結果に入ってまずい場合はPHPはどうかなぁと思ったりも。
- 2015年12月6日 8:50 AM #34257
 
 Hidekichi
 ゲスト
 
 それから考え方としてもうひとつ。
 
 例えば、記事の編集では、普通に半角スペースを入れてタイトルを入れるとします。
 
 「何かしらのタイトル改行したい時は半角スペースを入れる」
 
 こういうタイトルだとします。つまりは、メインのタイトルとそのサブタイトルみたいなものを半角のスペースで構成するという感じです。
 
 で、PHPで衆力する際に、今までどおり、半角スペースで切り分けます。explodeなどを使うと便利でしょう。
 で、最初の文節はメインのタイトルの部分なので、
 
 [h2 class=”entry-title”]何かしらのタイトル[h2]
 
 で、残りのサブタイトルの部分を、
 [p class=”entry-sub-title”]改行したい時は半角スペースを入れる[/p]
 
 このような感じでPHPで処理させます。
 そうしたら、
 
 [h2 class=”entry-title”]何かしらのタイトル[h2]
 [p class=”entry-sub-title”]改行したい時は半角スペースを入れる[/p]
 
 こういった状態が作れるわけですから、Googleはh2が見出しだと思ってentry-titleを拾い、表示的には改行した状態が作れ、データベース的には連続したタイトルが入ってるわけですから、それをmetaやogpなどに入れとできるんじゃなかろうかと思います。
 
 ここらはどのような仕様にして、どのように表示させるかをよく考え、かつタイトルの構成を一定のものにすると言うサイトを作る前の仕様作りが重要になってくると思います。
 
 何かしらのアイデアの一つとして。
- 2015年12月6日 8:51 AM #34258
 
 Hidekichi
 ゲスト
 
 × で、PHPで衆力する際に
 ◯ で、PHPで出力する際に
- 2015年12月6日 12:29 PM #34259
 
 Hidekichi
 ゲスト
 
 よくよく考えたら、記事中のh2はもちろん参照すると思うんですけど、サイト内のtitleタグがやはりGoogleの検索結果になるのではないかなぁと思ったりしています。
 
 よって、.entry-title(記事のタイトル)の部分はどのように加工しても、そのページのheadタグの中にある[title]タグが検索結果になるように思うんですよね。
 で、エリーさんのサイトの場合、titleタグにbrが入っていたのではないかと思ったりしています。
 
 ただここらは、きっとseo.phpでページのタイトルは処理されていて、記事のタイトル(entry-title)はentry-body.phpとかだと思うので、うーむと思ったり。
 
 ■今思う理想型
 
 titleタグ : 何かしらのタイトル改行したい時は半角スペースを入れる
 entry-title : 何かしらのタイトル[br]改行したい時は半角スペースを入れる
 より混みいったデザイン : [h2]何かしらのタイトル[/h2][p]改行したい時は半角スペースを入れる[/p]
 場合によっては : [h2]何かしらのタイトル[p]改行したい時は半角スペースを入れる[/p][/h2]
 現行jQuery : 何かしらのタイトル[br]改行したい時は半角スペースを入れる
 
 別件で。
 もし、Google-botがjQueryの処理後のタイトルやらを拾っているとすれば、jQueryでtitleタグの中のbrを取り除けるのではないだろうかとも思います。
- 2015年12月6日 6:45 PM #34268
 わいひら
 キーマスター
 僕の方法をまとめるとこんな感じです。
 子テーマのfunctions.phpに以下を追加、
```
//the_title()でタイトル取得時にbrを付加
function the_title_in_br( $content ) {
 return str_replace(" ", " ", $content);
}
add_filter('the_title', 'the_title_in_br');

//親テーマのタイトルタグ取得関数をオーバーライドしてすbrを取り除く
function simplicity_wp_title( $title, $sep ) {
 global $paged, $page;

 if ( is_feed() ) {
 return $title;
 }

 if(is_front_page()):
 $title = trim( get_bloginfo('name') );
 if ( is_catch_phrase_to_frontpage_title() )://キャッチフレーズを追加する場合
 $title = $title.' | ' . trim( get_bloginfo('description') );
 endif;
 elseif(is_singular()):
 $title = trim( get_the_title() );
 if ( is_site_name_to_singular_title() )://サイト名を追加する場合
 $title = $title.' | ' . trim( get_bloginfo('name') );
 endif;
 endif;

 $title = str_replace(' ', '', $title);

 return $title;
}
```
 改行タグを非表示にするには、例えば、「新着記事ウィジェット」の改行を非表示にする場合は以下のようにします。
```
.new-entry-title br{
 display: none;
}
```
 その他の、CSSセレクタセレクタは、以下の方法などで、自前で調べていただければと思います。
 WordPressテーマのCSSカスタマイズ向けChromeデベロッパーツールの使い方
 CSSセレクタについては以下を参照してください。
 セレクタの種類－CSSの基本
 意外と知らない!?CSSセレクタ20個のおさらい｜Webpark
- 2015年12月6日 6:51 PM #34269
 
 わいひら
 キーマスター
 
 上記の方法は、OGPやTwitterカードでbrが表示されるかも。
 それも取り除く場合は、以下のテーマ内の
 
 header-ogp.php
 header-twitter-card.php
 
 $title変数内のbrを取り除く置換処理をする必要があるかもしれません。
 方法は、ここまでPHPの置換処理は出てきていますし、詳しくは検索すれば出てくるかと思います。
- 2015年12月6日 6:57 PM #34270
 
 わいひら
 キーマスター
 
 あと、sns-buttons-xxxxx.php当たりのタイトル取得部分も文字列置換でbrを取り除く必要があるかも。
 Googleと、SNS両方で両立する方法は、結構めんどくさそう。
 
 sns-button-twitter.php
 sns-buttons-balloon.php
 sns-buttons-default.php
 sns-buttons-icon.php
- 2015年12月6日 7:04 PM #34271
 わいひら
 キーマスター
 やっぱ、上に書いたのはなしで以下のファイルの
 entry-body.php
 entry-card-content.php
 以下の部分を
 <?php the_title(); ?>
 置換したタイトルに入れ替えたほうが楽かも。
```
<?php
$title = get_the_title();
$title = str_replace(” “, “ ”, $title);//半角スペース2つをbrに
echo $title;
?>
```
 ※実際にテストは行ってません。
- 2015年12月7日 7:23 AM #34281
 
 えり
 ゲスト
 
 >Hidekichiさま、わいひらさま、
 お忙しいところ何度もありがとうございます。
 
 教えていただいた方法を色々と試して、結果うまく任意のところでBR改行できるようになりました！
 
 また、ブラウザータブのポップアップ表示やFacebookの投稿などからもBRが消えて表示されています！
 
 超初心者の私にもとても詳しく教えてくださり、本当に助かりました。
 
 Simplicityを自分なりに改造できるよう、これからも勉強あるのみです。
 
 今後ともどうぞよろしくお願いします！
投稿者

投稿