WordPressいじったメモ

WordPress

Simply Static以外で使っているプラグインやテンプレートいじったところ。

ヘッダーとフッターにコードを入れ込みたい

WPCode Lite（プラグイン）

これを入れてsimple modeで使ってる。

  • headタグ内
  • 本文（bodyタグ直後）
  • フッター（bodyタグ直前）
    の3箇所に入れられる。便利。

画像をWebPしたい

Converter for Media（プラグイン）

約立ってるかちゃんと確認してないや笑

OGPタグ入れたい

サルワカさんのページを参考に functions.php を編集しました。

【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法
https://saruwakakun.com/html-css/wordpress/ogp

Twitterはやめたのでコメントアウト。
Facebookもやめたのでコメントアウト。

投稿日と更新日を表示したい

/wp-content/themes/bloghash/inc/template-tags.php のコードをいじって以下のようにしたらいけた。

        $defaults = array(
            'show_published' => true,
            'show_modified'  => true,
            'modified_label' => esc_html__( '（ 更新 ', 'bloghash' ),
            'modified_label_after' => esc_html__( ' ）', 'bloghash' ),
            'date_format'    => '',
            'before'         => '<span class="posted-on">投稿 ',
            'after'          => '</span>',
        );

と

        $time_string = sprintf(
            $time_string,
            esc_attr( get_the_date( DATE_W3C ) ),
            bloghash_get_schema_markup( 'datePublished' ),
            $icon . esc_html( get_the_date( $args['date_format'] ) ),
            esc_attr( get_the_modified_date( DATE_W3C ) ),
            bloghash_get_schema_markup( 'dateModified' ),
            esc_html( $args['modified_label'] ) . esc_html( get_the_modified_date( $args['date_format'] ) ) . esc_html( $args['modified_label_after'] )
        );

Previous Post、Next Postを日本語化したい

/wp-content/themes/bloghash/template-parts/entry/entry-prev-next-post.php の

    // Previous post link.
    previous_post_link(
        '<div class="nav-previous"><h6 class="nav-title">' . wp_kses( __( '<<前の', 'bloghash' ), bloghash_get_allowed_html_tags( 'button' ) ) . '</h6>%link</div>',
        sprintf(
            '<div class="nav-content">%1$s <span>%2$s</span></div>',
            bloghash_get_post_thumbnail( $bloghash_prev_post, array( 75, 75 ) ),
            '%title'
        )
    );

とかを編集した。

Blueskyシェアボタンを置いてみた。

いくつかシェアボタン作ってみたいけど、とりあえずこれ。
とりあえず動作したので、他のシェアボタンも同じノリで作れるかな？

functions.php に以下のコードを記述。

/*********************
シェアボタン：Bluesky
*********************/
function add_bluesky_share_button($content) {
    if (is_single()) {
        $post_title = get_the_title();
        $post_permalink = get_permalink();
        $home_url = home_url();
        $post_path = str_replace($home_url, '', $post_permalink);
        $share_text = rawurlencode($post_title . "\nhttps://nyaon.jp" . $post_path);
        $bluesky_url = "https://bsky.app/intent/compose?text=" . $share_text;

        $button_html = '<div class="bluesky-share-button" style="margin-top: 20px; text-align: center;">';
        $button_html .= '<a href="' . $bluesky_url . '" target="_blank" style="padding: 10px 20px; background-color: #1da1f2; color: white; text-decoration: none; border-radius: 5px;">';
        $button_html .= 'Blueskyでシェア';
        $button_html .= '</a>';
        $button_html .= '</div>';

        $content .= $button_html;
    }
    return $content;
}
add_filter('the_content', 'add_bluesky_share_button');
// Blueskyシェアボタン、ここまで

カスタムCSSに以下を。

/*シェアボタン：Bluesky*/
.bluesky-share-button {
    margin-top: 20px;
    text-align: center;
}
.bluesky-share-button a {
    padding: 10px 20px;
    background-color: #1da1f2;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.bluesky-share-button a:hover {
    background-color: #0d95e8;
}
/*シェアボタン：Bluesky ここまで*/
Blueskyでシェア