Naver カフェ에 WordPress 記事のタイトルを2行にする方法について質問があり、投稿のタイトルを2行にする方法について考えました。タイトルを 2 行で表示することで、2 番目の行を副題のように活用できます。記事のタイトルに改行タグを追加して2行で表示したい場合は、参考にしてください。
インターネット新聞記事では、記事のタイトルの下に内容をまとめた副題を表示することがあります。 WordPressにサブタイトルを追加する方法は、以下の記事で確認できます。
WordPress 記事のタイトルを2行で表示する方法
記事のタイトルを2行で表示する方法は、ティーストーリーブログの「WooCommerce 商品名を2行で表示する「という記事に記載されているコードを適用できます。
記事のタイトルに改行タグ（br）を追加する方法
デフォルトでは、次のコードを使用できます。
// Add a line break in WordPress Post Titles
function split_title_on_pipe($title) {
if (strpos($title, '|') !== false) {
$parts = explode('|', $title, 2);
$title = $parts[0] . '<br><span class="second-line">' . $parts[1] . '</span>';
}
return $title;
}
add_filter('the_title', 'split_title_on_pipe');投稿のタイトルの改行タグ（）を追加したい場所にパイプ文字（|)を入力すると、改行タグが追加され、2行で表示されます。 2行目の文字色、文字サイズなどはCSSを使用して調整できます。
別のコードは、次のユーザーコードを使用できます。上記のコードからセキュリティを強化するコードを追加しました。
function split_title_on_pipe($title) {
$title = sanitize_text_field($title);
// 제목에 '|' 문자가 있는지 확인합니다.
if (strpos($title, '|') !== false) {
// '|' 문자를 기준으로 제목을 나눕니다.
$parts = explode('|', $title, 2);
// 각 부분을 이스케이프하여 XSS 공격을 방지합니다.
$first_part = esc_html($parts[0]);
$second_part = esc_html($parts[1]);
// 줄 바꿈 및 span 태그 추가
$title = $first_part . '<br><span class="second-line">' . $second_part . '</span>';
}
return $title;
}
add_filter('the_title', 'split_title_on_pipe');上記のコードを チャイルドテーマの関数ファイル（のfunctions.php）に追加してください。これを行うには、FTP / SFTPに接続できる必要があります。
そして、次のコードを 管理者ページ » デザイン » カスタマイズ » 追加のCSSに入力します。
/* 글 제목에서 두 번째 라인의 스타일 변경 */
.second-line {
font-size: 0.7em; /* 글꼴 크기 조정 */
color: #666; /* 글꼴 색상 조정 */
}タイトルの2行目の文字サイズや色などは、テーマに合わせて適切に調整します。
SEOを考慮したより良い方法？
上記の方法を使用すると、記事のタイトルに br タグが追加されると、2行で表示されます。 SEOの観点から大きな影響はないかもしれませんが、HTML構造を維持しながらCSSを使用して2行に見えるようにする方法がSEOを鎮めたときには良いと言われています。
上記のPHPコードで次の行を見つけて
// 줄 바꿈 및 span 태그 추가
$title = $first_part . '<br><span class="second-line">' . $second_part . '</span>';次の行に置き換えます。
// span 태그 추가 (줄 바꿈 없음)
$title = '<span class="two-line-title">' . $first_part . '<span class="second-line">' . $second_part . '</span></span>';
}CSSコードには次のコードを追加します。
.two-line-title {
display: inline-block;
white-space: pre-wrap; /* 줄 바꿈을 유지 */
}
.two-line-title .second-line {
display: block;
margin-top: 0.5em; /* 두 줄 사이의 간격 조정 */
}0.5em 数値は適切に変更してください。
これにより、Googleなどの検索エンジンが表示されるときは、タイトルが1行に表示されているかのように認識されます。
例：
<h1 class="entry-title" itemprop="headline"><span class="two-line-title">제목 라인 1 <span class="second-line">제목 라인 2</span></span></h1>適用例
上記のコード GeneratePress テーマに適用してテストしてみました。
記事のタイトルに改行タグ（br）を挿入する場所にパイプ文字（|）を入力してください。最初の行の最後にスペースを追加し、2行目の前にスペースを追加しないでください。
文章を保存すると、次のように文章のタイトルが2行で表示され、2行目のテキストの色とサイズが最初の行とは異なるように表示されます。
最新の記事のリストでも2行で表示されます。
最新の記事ページやカテゴリページなど、アーカイブページでは、1行で表示したい場合は、追加したカスタムCSSスタイルが個々の投稿にのみ適用されるようにCSSコードを変更するだけです。
GeneratePress テーマでテストしましたが、他のテーマでもうまく機能します。 CSS スタイルはテーマに応じて適宜修正してください。
コメントを残す