• 著者:管理人
  • 記事の最終変更日: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 . '</a>', '" class="multiple-posts">' . $post_count->day . '</a>', $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 .= '<h5 class="multiple-posts-header">DH(ダブルヘッダー)</h5>';
                $output .= '<ul class="multiple-posts-list">'; // リストの開始
                $first_date_flag = false;
            }
            $output .= '<li class="multiple-posts-item"><a href="' . get_day_link(substr($date, 0, 4), substr($date, 4, 2), substr($date, 6, 2)) . '" class="multiple-posts-link">' . date('Y年n月j日', strtotime($date)) . '</a> <span class="multiple-posts-count">(' . count($posts) . ')</span></li>';
        }
    }

    $output .= '</ul>'; // リストの終了

    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 '<span class="total-posts">' . $total_posts . '</span>';
}
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()) {
        ?>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                var excerpts = document.querySelectorAll('.blog-entry.post .blog-entry-summary');
                excerpts.forEach(function(excerpt) {
                    var postLink = excerpt.closest('.blog-entry.post').querySelector('a').href;
                    var linkWrapper = document.createElement('a');
                    linkWrapper.href = postLink;
                    linkWrapper.style.display = 'block';
                    var excerptContent = excerpt.innerHTML;
                    excerpt.innerHTML = '';
                    linkWrapper.innerHTML = excerptContent;
                    excerpt.appendChild(linkWrapper);
                });
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_link_to_excerpt');

				
			
				
					// 投稿リストページで抜粋文に「続きを読む」で本文へのリンクを付与する場合(OceanWPデフォルトではリンクがない)
function add_read_more_link_to_excerpt() {
    if (is_home() || is_archive()) {
        ?>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                var excerpts = document.querySelectorAll('.blog-entry.post .blog-entry-summary');
                excerpts.forEach(function(excerpt) {
                    var postLink = excerpt.closest('.blog-entry.post').querySelector('a').href;
                    var readMoreLink = document.createElement('a');
                    readMoreLink.href = postLink;
                    readMoreLink.textContent = '続きを読む';
                    readMoreLink.className = 'read-more';
                    excerpt.appendChild(readMoreLink);
                });
            });
        </script>
        <?php
    }
}
add_action('wp_footer', 'add_read_more_link_to_excerpt');

				
			
				
					// 「ブログのトップに固定」記事をページ送りの遷移先から除外(重複回避)
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で、ハイライトされている行を書き換えます。これはテーマの更新で消失しますので、子テーマに同様の階層を用意してファイルを設置すると良いでしょう。

				
					<?php
/**
 * The next/previous links to go to another post.
 * 記事ページでのページ送りカスタムラベル(メニューと統一)
 * @package OceanWP WordPress theme
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

// Only display for standard posts.
if ( 'post' !== get_post_type() ) {
	return;
}

// Term.
$term_tax = get_theme_mod( 'ocean_single_post_next_prev_taxonomy', 'post_tag' );
$term_tax = $term_tax ? $term_tax : 'post_tag';

// Navigation icons.
$prev_arrow = is_rtl() ? 'long_arrow_alt_right' : 'long_arrow_alt_left';
$next_arrow = is_rtl() ? 'long_arrow_alt_left' : 'long_arrow_alt_right';

// Vars.
$prev_text = '<span class="title">' . oceanwp_icon( $prev_arrow, false ) . ' ' . esc_html( 'ひとつ前の記事(古)' ) . '</span><span class="post-title">%title</span>';
$next_text = '<span class="title">' . oceanwp_icon( $next_arrow, false ) . ' ' . esc_html( '(新)ひとつ後の記事' ) . '</span><span class="post-title">%title</span>';
$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 ); ?>

<?php do_action( 'ocean_before_single_post_next_prev' ); ?>

<?php the_post_navigation( $args ); ?>

<?php

do_action( 'ocean_after_single_post_next_prev' );

				
			

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 = '<span class="todayhighlight">' + document.getElementById('today').innerHTML + '</span>';