ブログ関連
- 著者:管理人
- 固定ページ公開日:2024年4月16日
- 記事の最終変更日:2024年8月25日
CSS
ダッシュボード>外観>カスタマイズ>追加CSSや、Scripts n Styles(プラグイン)等でコピペして使用します。
/*ブログトップページでの上部余白調整(他テンプレートと統一感)*/
div#blog-entries {
margin-top: 10px;
}
/*ブログトップページで固定投稿下線太く*/
article#post-1.sticky {
border-bottom: 3px solid #f1f1f1;
}
/*上以外の投稿から下線除去*/
.blog-entry.thumbnail-entry {
border-bottom: 0px solid #f1f1f1;
}
/*ブログトップページ、各記事タイトルと抜粋の間隔調整*/
@media(max-width:1023px){
.blog-entry.post .blog-entry-header {
margin-bottom: 10px;
}
}
/*ブログ記事ページでタイトル非表示(カスタマイザー設定でヘッダーに表示される)*/
h2.single-post-title.entry-title {
display: none;
}
/*ブログ記事のメタ情報フォントサイズ変更*/
ul.meta li i ,.single-post ul.meta {
font-size: 12px;
}
/*メタ要素間の記号「-」をスペースに変更*/
.single-post ul.ospm-default li:after {
content: "";
}
/*メタ要素下線除去と余白調整*/
.single-post ul.meta {
border-bottom: 0px;
padding-bottom: 0;
margin-bottom:10px;
}
/*メタ要素のアイコン変更*/
.icon-clock:before {
content: "\e075";/*時計からカレンダーへ*/
}
.icon-note:before {
content: "\e099";/*鉛筆から矢印一周へ*/
}
.icon-folder:before {
content: "\e039";/*フォルダのデザイン変更*/
}
.icon-bubble:before {
content: "\e04a";/*吹き出し2個へ変更*/
}
.icon-cup:before {
content: "\e081";/*コーヒーカップを時計へ変更*/
}
/*ブログ記事サムネ下余白調整(キャプション追加時のみ必要)*/
.single .thumbnail {
margin-bottom: 10px;
}
/*ブログトップページ(リストページ)のサムネでキャプションを非表示にする*/
div#blog-entries .thumbnail-caption
{
display: none;
}
/*ブログ記事ページで画像の自動キャプション追加を封じる場合*/
.thumbnail-caption,figcaption.wp-element-caption {
display: none;
}
/*上記封じない場合(当サイト)の調整*/
.thumbnail-caption,figcaption.wp-element-caption {
font-size: 10px;
margin-top: 0.1em;
text-align: right;
}
/*キャプションのリンクに下線が引かれるのを封じる*/
figcaption.wp-element-caption a {
text-decoration: none !important;
}
/*ブロックパーツ「引用」での「出典」上の余白詰める*/
blockquote cite {
margin: -20px 0 20px;
}
/*記事ページでのページ送り調整(反応範囲を制御)*/
.nav-previous a {
width: fit-content;
}
.nav-next a {
width: fit-content;
float:right;
}
@media(max-width:480px){
.nav-links {
display: flex;
}
}
/*記事ページでのページ送りアイコン変更*/
.fa-long-arrow-alt-left:before {
content: "\f137"!important;
}
.fa-long-arrow-alt-right:before {
content: "\f138"!important;
}
/*記事ページでのページ送りアイコンとテキストの間隔調整*/
.single nav.post-navigation .nav-next i, .single nav.post-navigation .nav-next .owp-icon {
margin-left: 3px;
}
.single nav.post-navigation .nav-previous i, .single nav.post-navigation .nav-previous .owp-icon {
margin-right: 3px;
}
/*ブログトップページでのページ送りサイズ調整(ブログのページ送りスタイル:標準)*/
.page-numbers a, .page-numbers span:not(.elementor-screen-only), .page-links span {
min-width: 25px;
line-height: 25px;
margin: 0 5px 0 0;
font-size: 13px;
}
/*ブログボタン、他のページとのカラー統一(classにtouitubuttonを設定後)*/
.touitubutton .wp-block-button__link{
background-color: #000;
color:#fff;
margin-bottom:10px;
}
.touitubutton .wp-block-button__link:hover{
background-color: #7a7a7a;
color:#fff;
}
/*コメントアバター円マスク除去*/
.comment-body img.avatar{
border-radius:0;
}
/*コメントレイアウト調整(スマホのみ変更、デフォで非表示のアバター復活)*/
@media(max-width: 480px){
.comment-body img {
display: inline;
}
.comment-body img.avatar {
width: 50px;
height: 50px;
margin-right: 10px;
}
.comment-content {
bottom: 5px;
}
.comment-content p {
margin-left: -60px;
}
.comment-author {
display: flex;
float: left;
flex-direction: column;
margin-bottom: 0;
}
span.comment-meta.commentmetadata {
margin-top: -10px;
}
}
/*おすすめ記事のタイトルリンクを文字のみに適用させる*/
.related-post-title a {
display: inline;/*オリジナルはblock*/
}
PHP追加
①ダッシュボード>外観>テーマファイルエディター>テーマのための関数(functions.php)や②「子テーマ」のテーマのための関数(functions.php)に追記するか、③Code Snippets(プラグイン)等でコピペして使用します。①はテーマの更新で消失します。②③は更新の影響を受けません。
// 翻訳されない「mins read」を変更
if ( ! function_exists( 'ocean_reading_time' ) ) {
function ocean_reading_time() {
global $post;
$content = get_post_field( 'post_content', $post->ID );
$word_count = str_word_count( $content );
$reading_time = ceil( $word_count / 200 );
$reading_time = apply_filters( 'oceanwp_post_reading_time', $reading_time );
$owp_reading_time = printf(
/* translators: 1: post reading time. */
esc_html__( '%1$s分で読めます', 'oceanwp' ),
number_format_i18n( $reading_time )
);
}
}
// デフォルトのカレンダーウィジェットで複数投稿日を修飾する(要CSSでの適宜調整)
function custom_calendar_output($html) {
global $wpdb;
// 現在の月と年を取得する
$current_month = get_query_var('monthnum');
$current_year = get_query_var('year');
// 月と年が指定されていない場合は現在の月を使用する
if (empty($current_month)) {
$current_month = date('n');
}
if (empty($current_year)) {
$current_year = date('Y');
}
// 投稿がある日付の数を取得する
$post_count_by_date = $wpdb->get_results("
SELECT COUNT(ID) as post_count, DAYOFMONTH(post_date) as day
FROM $wpdb->posts
WHERE post_type = 'post' AND post_status = 'publish' AND MONTH(post_date) = $current_month AND YEAR(post_date) = $current_year
GROUP BY DAYOFMONTH(post_date)
");
// 各日付に投稿が複数ある場合には、その日付にクラスを追加する
foreach ($post_count_by_date as $post_count) {
if ($post_count->post_count > 1) {
$html = str_replace('">' . $post_count->day . '', '" class="multiple-posts">' . $post_count->day . '', $html);
}
}
return $html;
}
add_filter('get_calendar', 'custom_calendar_output');
// 同じ日に複数の投稿がある日付を一覧で表示するショートコード[display_multiple_posts]を作成
function display_multiple_posts_on_same_day($atts) {
// 同じ日に複数の投稿がある日付を取得するためのクエリ
$posts_query = new WP_Query(array(
'posts_per_page' => -1, // すべての投稿を取得
'post_type' => 'post', // 投稿タイプを指定
'orderby' => 'date', // 日付順に並べ替え
'order' => 'DESC', // 最新の投稿から表示
));
// 日付ごとに投稿をグループ化するための配列
$date_posts = array();
// 各投稿をループして、日付ごとにグループ化する
if ($posts_query->have_posts()) {
while ($posts_query->have_posts()) {
$posts_query->the_post();
$post_date = get_the_date('Ymd'); // Ymd形式で日付を取得
if (!isset($date_posts[$post_date])) {
$date_posts[$post_date] = array();
}
$date_posts[$post_date][] = get_the_title(); // タイトルを配列に追加
}
}
// クエリのリセット
wp_reset_postdata();
// 最初の日付の前にのみ「ダブルヘッダー」「連投甲子園」などのタイトルを表示するフラグ
$first_date_flag = true;
// 同じ日に複数の投稿がある日付を表示
$output = '';
foreach ($date_posts as $date => $posts) {
if (count($posts) > 1) { // 同じ日に複数の投稿がある場合のみ表示
if ($first_date_flag) {
$output .= 'DH(ダブルヘッダー)
';
$output .= ' '; // リストの開始
$first_date_flag = false;
}
$output .= '- ' . date('Y年n月j日', strtotime($date)) . ' (' . count($posts) . ')
';
}
}
$output .= '
'; // リストの終了
return $output;
}
add_shortcode('display_multiple_posts', 'display_multiple_posts_on_same_day');
// 本日の日付を取得して表示するショートコード[current_date]を作成
function current_date_shortcode() {
$current_date = date_i18n( 'Y.n.j' );
return $current_date;
}
add_shortcode( 'current_date', 'current_date_shortcode' );
// 公開済みの投稿総数を表示するショートコード[total_posts]を作成
function total_posts_shortcode() {
$count_posts = wp_count_posts();
$total_posts = $count_posts->publish;
return '' . $total_posts . '';
}
add_shortcode('total_posts', 'total_posts_shortcode');
// 任意の文字列で次の投稿リンクを生成するショートコード[custom_next_post text="○○○"]を作成
// (次回へ続くことがわかっているものの、タイトルやURLが未定の場合に便利です)
function custom_next_post_link($atts) {
// デフォルトの文字列を設定
$atts = shortcode_atts(
array(
'text' => '次の投稿',
), $atts, 'custom_next_post'
);
// 次の投稿リンクを生成
$next_post_link = get_next_post_link('%link', $atts['text']);
// 次の投稿がない場合のメッセージ
if (!$next_post_link) {
return '次の記事はありません。';
}
return $next_post_link;
}
add_shortcode('custom_next_post', 'custom_next_post_link');
// 投稿リストページで抜粋文全体に本文へのリンクを付与(OceanWPデフォルトではリンクがない)
function add_link_to_excerpt() {
if (is_home() || is_archive()) {
?>
// 投稿リストページで抜粋文に「続きを読む」で本文へのリンクを付与する場合(OceanWPデフォルトではリンクがない)
function add_read_more_link_to_excerpt() {
if (is_home() || is_archive()) {
?>
// 「ブログのトップに固定」記事をページ送りの遷移先から除外(重複回避)
function exclude_sticky_post_from_pagination( $query ) {
if ( $query->is_main_query() && !is_admin() && $query->is_paged ) {
$sticky_post_id = get_option( 'sticky_posts' );
$query->set( 'post__not_in', $sticky_post_id );
}
}
add_action( 'pre_get_posts', 'exclude_sticky_post_from_pagination' );
PHP修正(置換)
ダッシュボード>外観>テーマファイルエディター>partials>single>next-prev.phpで、ハイライトされている行を書き換えます。これはテーマの更新で消失しますので、子テーマに同様の階層を用意してファイルを設置すると良いでしょう。
' . oceanwp_icon( $prev_arrow, false ) . ' ' . esc_html( 'ひとつ前の記事(古)' ) . '%title';
$next_text = '' . oceanwp_icon( $next_arrow, false ) . ' ' . esc_html( '(新)ひとつ後の記事' ) . '%title';
$screen_rt = esc_html( oceanwp_theme_strings( 'owp-string-single-screen-reader-rm', false ) );
// Args.
if ( 'pub-date' === $term_tax ) {
$args = array(
'prev_text' => $prev_text,
'next_text' => $next_text,
'in_same_term' => false,
'screen_reader_text' => $screen_rt,
);
} else {
$args = array(
'prev_text' => $prev_text,
'next_text' => $next_text,
'in_same_term' => true,
'taxonomy' => $term_tax,
'screen_reader_text' => $screen_rt,
);
}
// Display Next/Prev navigation.
$args = apply_filters( 'ocean_single_post_next_prev_args', $args ); ?>
JavaScript追加
追加する方法は様々ありますが、当サイトでは<script></script>で囲み、ElementorのHTMLウィジェットで追加しています。挿入位置はカレンダーウィジェット直下です。
// デフォルトのカレンダーウィジェットで土日の日付を修飾するためのclass追加(最上段曜日と共に、要CSSでの適宜調整)
document.addEventListener("DOMContentLoaded", function() {
var calendarTable = document.querySelector("table#wp-calendar");
var weekRows = calendarTable.querySelectorAll("tbody tr");
// 今日の曜日を取得
var today = new Date();
var currentDay = today.getDay(); // 0が日曜日、1が月曜日、...
// カレンダーの開始曜日によって土曜日と日曜日の位置を調整
var saturdayIndex = (6 - currentDay + 1 + 7) % 7;
var sundayIndex = (7 - currentDay + 1 + 7) % 7;
// 各週の土曜日と日曜日にクラスを追加
weekRows.forEach(function(row, index) {
var saturdayCell, sundayCell;
if (index === 0) { // 第一週の場合
saturdayCell = row.querySelector("td:nth-last-child(2)");
sundayCell = row.querySelector("td:last-child");
} else { // それ以外の週の場合は通常通り土曜日と日曜日のセルを選択
saturdayCell = row.querySelector("td:nth-child(6)");
sundayCell = row.querySelector("td:nth-child(7)");
}
if (saturdayCell && saturdayCell.textContent.trim() !== "") {
saturdayCell.classList.add("saturday");
}
if (sundayCell && sundayCell.textContent.trim() !== "") {
sundayCell.classList.add("sunday");
}
});
});
// デフォルトのカレンダーウィジェットで本日の日付を修飾するためのclass追加(要CSSでの適宜調整)。
// ※デフォルトではIDしか設定がないのでセル全体にスタイル変更が及んでしまう(当サイトのアニメーションではIDのみで実装可)
document.getElementById('today').innerHTML = '' + document.getElementById('today').innerHTML + '';
最近のコメント