投稿ページタイトルを指定した場所で改行したい

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など 投稿ページタイトルを指定した場所で改行したい

このトピックには12件の返信が含まれ、1人の参加者がいます。3 年、 8 ヶ月前 Hidekichi さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #33953 返信

    Peru

    投稿ページのタイトルを例えば

    「ページタイトルを改行したい」
    とあるのを
    「ページタイトルを<br/>
    改行したい」

    と指定した場所で改行するようにしたいのですが、なかなかうまくいきません。
    簡単な方法として<br/>を入れてみて、ページはきちんと表示されたのですが、タブに表示されるタイトルに<br/>が表示されてしまいました。

    cssでうまく表示させる方法が思いつかなかったので、phpでできる方法を調べ、
    <?php
    echo str_replace( ‘ ‘, ‘<br />’, get_the_title() );
    ?>

    <?php
    $title = get_the_title($ID);
    $title = str_replace(” “, “<br />”, $title);
    echo $title;
    ?>

    を試してみましたが、サイトが真っ白になりうまくいきませんでした。
    申し訳ありませんが、何か良い方法があればアドバイスお願いします。

  • #33954 返信

    Hidekichi

    タイトルに直接brを入れてみるとか。

  • #33955 返信

    Hidekichi

    あ、すでにやってましたか(笑)

    サンプル: 限定方法でbrを入れる | jsFiddle

    こんな感じにできます。

    > 指定した場所で改行するようにしたいのですが

    指定した場所というのは、具体的にどういった箇所になりますか?

  • #33958 返信

    Peru

    Hidekichiさん、ありがとうございます。

    >指定した場所というのは、具体的にどういった箇所になりますか?
    文字数とか横幅を指定するのではなくて、記事ごとに好きなところで改行するということです。
    単語の途中ではなく、文節ごとにきれいに区切るようにしたいのです。

    例)
    投稿1タイトル「第1章
            はじめに」
    投稿2タイトル「ワードプレス
            ~WordPress~」
    投稿3タイトル「ページタイトルを改行する
            方法がわからない」

    こんな感じです。わかりにくくてすみません。
    phpでやろうとしたのは、スペースを<br/>に変換するというコードです。
    Hidekichiさんのコードも似たような感じですね。早速試してみますm(_ _)m

    それから、初歩的な質問で申し訳ないのですが、入力場所は子テーマのfunctions.phpであってますか?

  • #33960 返信

    Hidekichi

    > 入力場所は子テーマのfunctions.phpであってますか?

    いえ、子テーマjavascript.jsです。
    具体的な箇所をというのがどこかを聞いてからサンプルを作ろうかと思っていたんですが、例えば、

    第1章 はじめに
    ワードプレス ~WordPress~

    と言うような形で、間にスペースを入れるというのはどうですか?
    そしたら、スペースで改行という手法が取れます。タイトル的には、半角スペースが入った所で何も問題ないですからわかりやすいかと思います。ただ、複数のスペースがあった場合はそこらも考慮しないといけないので、本当に半角スペースで良いかどうかが問題点です。

    必ず1タイトルには1つしか半角スペースが入っていないというのであれば、サックリとサンプルが作れます。

  • #33961 返信

    Hidekichi

    ちなみに、jQuery(javascript)を利用するのは、wordpressの元の文字列等に影響を与えないからです。
    もちろん出力時にbrを加えるなどという感じでphpでもできなくはないかと思いますが、原形を残したまま加工するのにはjQuery等がもってこいかと思います。

  • #33967 返信

    Peru

    Hidekichiさん

    子テーマのfunctions.phpに入力したとたんサイトが真っ白になったので、やはり入力場所が間違っていたのですね。教えていただきありがとうございます。

    >スペースで改行という手法が取れます。

    とてもいい方法ですね。1つのタイトルに半角スペースは1個のみという条件でいきたいと思っています。

    >必ず1タイトルには1つしか半角スペースが入っていないというのであれば、サックリとサンプルが作れます。

    私のような勉強不足な者にご丁寧に対応してくださり誠に恐縮です。何卒よろしくお願いしますm(_ _)m

  • #33969 返信

    Hidekichi

    最初のサンプルをアップデートしました。

    サンプル: タイトルの半角スペースをbrに変える | jsFiddle

    左上のhtml内、.entry-titleの中のタイトルの任意の部分に半角スペースを入れて動作するかを確かめてみて下さい。タイトル編集後→画面左上にあるrunで実行されます。

    複数の半角スペースには対応していませんので、タイトルに1つのスペースと言うのをルールとして覚えておいて下さい。

  • #33972 返信

    Hidekichi

    ちなみに全ての半角スペースに対応する場合は.matchを利用して正規表現で置換します。

  • #33975 返信

    Hidekichi

    .matchは利用してませんが、正規表現にて置換するサンプル

    記事タイトルの半角スペースをbrに変換する(複数スペース対応版) | jsFiddle

  • #34116 返信

    Peru

    Hidekichiさん
    ありがとうございますm(_ _)m
    記事タイトルは無事に改行されました。
    テーマの仕様なのか、記事タイトルの前後にすでにスペースが入っていたようで、1つのスペースだけを指定すると上部に空白ができて、改行ができないということでした。
    Hidekichiさんが教えてくださいました、すべての半角スペースに対応する方法か、スペース以外の記号で対応するとうまくいくようです。

    しかし、どうしても気になることがあります。
    スペースでも記号でも同様の現象が起きるのですが、
    記事一覧や関連記事に表示されるタイトルが
    こんな感じで表示したいのが
    「第1章
     はじめに」
    「第2章
     説明」
    「第3章
     おわりに」

    こんな感じで表示されてしまいます。
    「第1章
     はじめに第2章説明第3章おわりに」
    「第1章
     はじめに第2章説明第3章おわりに」
    「第1章
     はじめに第2章説明第3章おわりに」

    原因がわからず困っております。
    申し訳ありませんが、原因を教えていただけるとありがたいです。

  • #34117 返信

    Peru

    すみません。関連記事は問題いありませんでした。

    1度目に下さった1つのスペースを指定するサンプルで、
    スペースを「*」に変えてみると記事一覧がこんな感じで表示されます。
    「第1章
     はじめに第2章*説明第3章*おわりに」
    「第1章
     はじめに第2章*説明第3章*おわりに」
    「第1章
     はじめに第2章*説明第3章*おわりに」

    2度目にくださったサンプルで複数のスペースを指定したときに、
    記事一覧がこんな感じで表示ます。
    「第1章 はじめに第2章
     説明第3章
     おわりに」
    「第1章 はじめに第2章
     説明第3章
     おわりに」
    「第1章 はじめに第2章
     説明第3章
     おわりに」

  • #34118 返信

    Hidekichi

    もしかして、1ページ内にいくつかの.entry-titleがありますか?

    もしそうであれば、それぞれに処理をするようにしないといけません。

    サンプル: ページ内に複数のタイトルがある場合の対応 | jsFiddle

    もし仮に.entry-titleでなくても、

    [h2 class=”test”]1つ目のタイトル テスト[/h2]
    なにかしら
    [h2 class=”test”]2つ目のタイトル テスト[/h2]
    なにかしら
    [h2 class=”test”]3つ目のタイトル テスト[/h2]
    なにかしら

    こういう感じのhtmlであれば、jQueryの.entry-titleの部分を.test(仮称)と書き換えれば対応できます。

返信先: 投稿ページタイトルを指定した場所で改行したい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)