Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 投稿ページタイトルを指定した場所で改行したい
- このトピックには12件の返信、1人の参加者があり、最後に
Hidekichiにより7年、 6ヶ月前に更新されました。
-
投稿者投稿
-
-
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;
?>を試してみましたが、サイトが真っ白になりうまくいきませんでした。
申し訳ありませんが、何か良い方法があればアドバイスお願いします。 -
Hidekichi
ゲストタイトルに直接brを入れてみるとか。
-
Hidekichi
ゲストあ、すでにやってましたか(笑)
サンプル: 限定方法でbrを入れる | jsFiddle
こんな感じにできます。
> 指定した場所で改行するようにしたいのですが
指定した場所というのは、具体的にどういった箇所になりますか?
-
Peru
ゲストHidekichiさん、ありがとうございます。
>指定した場所というのは、具体的にどういった箇所になりますか?
文字数とか横幅を指定するのではなくて、記事ごとに好きなところで改行するということです。
単語の途中ではなく、文節ごとにきれいに区切るようにしたいのです。例)
投稿1タイトル「第1章
はじめに」
投稿2タイトル「ワードプレス
~WordPress~」
投稿3タイトル「ページタイトルを改行する
方法がわからない」こんな感じです。わかりにくくてすみません。
phpでやろうとしたのは、スペースを<br/>に変換するというコードです。
Hidekichiさんのコードも似たような感じですね。早速試してみますm(_ _)mそれから、初歩的な質問で申し訳ないのですが、入力場所は子テーマのfunctions.phpであってますか?
-
Hidekichi
ゲスト> 入力場所は子テーマのfunctions.phpであってますか?
いえ、子テーマjavascript.jsです。
具体的な箇所をというのがどこかを聞いてからサンプルを作ろうかと思っていたんですが、例えば、第1章 はじめに
ワードプレス ~WordPress~と言うような形で、間にスペースを入れるというのはどうですか?
そしたら、スペースで改行という手法が取れます。タイトル的には、半角スペースが入った所で何も問題ないですからわかりやすいかと思います。ただ、複数のスペースがあった場合はそこらも考慮しないといけないので、本当に半角スペースで良いかどうかが問題点です。必ず1タイトルには1つしか半角スペースが入っていないというのであれば、サックリとサンプルが作れます。
-
Hidekichi
ゲストちなみに、jQuery(javascript)を利用するのは、wordpressの元の文字列等に影響を与えないからです。
もちろん出力時にbrを加えるなどという感じでphpでもできなくはないかと思いますが、原形を残したまま加工するのにはjQuery等がもってこいかと思います。 -
Peru
ゲストHidekichiさん
子テーマのfunctions.phpに入力したとたんサイトが真っ白になったので、やはり入力場所が間違っていたのですね。教えていただきありがとうございます。
>スペースで改行という手法が取れます。
とてもいい方法ですね。1つのタイトルに半角スペースは1個のみという条件でいきたいと思っています。
>必ず1タイトルには1つしか半角スペースが入っていないというのであれば、サックリとサンプルが作れます。
私のような勉強不足な者にご丁寧に対応してくださり誠に恐縮です。何卒よろしくお願いしますm(_ _)m
-
Hidekichi
ゲスト最初のサンプルをアップデートしました。
サンプル: タイトルの半角スペースをbrに変える | jsFiddle
左上のhtml内、.entry-titleの中のタイトルの任意の部分に半角スペースを入れて動作するかを確かめてみて下さい。タイトル編集後→画面左上にあるrunで実行されます。
複数の半角スペースには対応していませんので、タイトルに1つのスペースと言うのをルールとして覚えておいて下さい。
-
Hidekichi
ゲストちなみに全ての半角スペースに対応する場合は.matchを利用して正規表現で置換します。
-
Hidekichi
ゲスト.matchは利用してませんが、正規表現にて置換するサンプル
-
Peru
ゲストHidekichiさん
ありがとうございますm(_ _)m
記事タイトルは無事に改行されました。
テーマの仕様なのか、記事タイトルの前後にすでにスペースが入っていたようで、1つのスペースだけを指定すると上部に空白ができて、改行ができないということでした。
Hidekichiさんが教えてくださいました、すべての半角スペースに対応する方法か、スペース以外の記号で対応するとうまくいくようです。しかし、どうしても気になることがあります。
スペースでも記号でも同様の現象が起きるのですが、
記事一覧や関連記事に表示されるタイトルが
こんな感じで表示したいのが
「第1章
はじめに」
「第2章
説明」
「第3章
おわりに」こんな感じで表示されてしまいます。
「第1章
はじめに第2章説明第3章おわりに」
「第1章
はじめに第2章説明第3章おわりに」
「第1章
はじめに第2章説明第3章おわりに」原因がわからず困っております。
申し訳ありませんが、原因を教えていただけるとありがたいです。 -
Peru
ゲストすみません。関連記事は問題いありませんでした。
1度目に下さった1つのスペースを指定するサンプルで、
スペースを「*」に変えてみると記事一覧がこんな感じで表示されます。
「第1章
はじめに第2章*説明第3章*おわりに」
「第1章
はじめに第2章*説明第3章*おわりに」
「第1章
はじめに第2章*説明第3章*おわりに」2度目にくださったサンプルで複数のスペースを指定したときに、
記事一覧がこんな感じで表示ます。
「第1章 はじめに第2章
説明第3章
おわりに」
「第1章 はじめに第2章
説明第3章
おわりに」
「第1章 はじめに第2章
説明第3章
おわりに」 -
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(仮称)と書き換えれば対応できます。
-
-
投稿者投稿