Beansテーマをカスタマイズするためにしたこと

beans

タイトルの通りです。カスタマイズの幅が広い分、lessとかPHPとかアクションフックの知識が必要となってくるはずなんですが、そんなの一切知らなくてもコピペでなんとかなりました。

追加CSSを追加

WordPressの機能「追加CSS」でCSSをカスタマイズしてます。

/*テキスト関連の設定*/
h1.uk-article-title{
	font-size:1.0rem;
	font-weight:bold;
}

h2.uk-article-title{
	font-size:1.4rem;
	font-weight:bold;
}

h3{
	font-weight:bold;
	margin-top:1rem;
}

h4{
	font-weight:bold;
	margin-top:1rem;
}

p{line-height:1.6em;}



/*マンガ用 余白の設定*/
img.comic {
	margin-top: 50px;
	margin-bottom: 250px;
	margin-left:0px;
	margin-right:0px;
}

/*バナー用 画像の設定*/
img.banner {
	margin: 0px auto;
	    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 5px;
}

最初の .uk-article-title っていうのはuikitのCSSなので次に書いたlessで美しく書き換えられるはずなんですが、そんなの知らねえってときに力技で変更してしまっただけです

uikitのメインカラーをlessで変更

lessっていうのは大量のCSSを簡単に書き換えられるやつ（雑な説明）らしいんですが詳しいことが分からなくても直感的に操作できるカスタマイザーがついてるんです、そうuikitならね。

カスタマイザー：https://getuikit.com/v2/docs/customizer.html

//
// Typography
//

@global-link-color: #fb4c16;
@global-link-hover-color: #cc3300;

//
// Spacings
//

@global-grid-gutter: 20px;

//
// Buttons, Navs & Badges
//

@global-primary-background: #ff8522;

//
// Alert
//

@alert-background: #ffdac9;
@alert-color: #a06f15;

//
// Article
//

@article-title-font-weight: normal;
@article-lead-font-weight: normal;

//
// Base
//

@base-selection-background: #ff8522;

//
// Block
//

@block-primary-background: #ff8522;

//
// Button
//

@button-primary-active-background: #ff5722;
@button-primary-hover-background: #ff9800;

//
// Form
//

@form-focus-border: #ffdac9;
@form-advanced-checked-color: #ff9800;

//
// Icon
//

@icon-font-path: "../../fonts";

//
// Panel
//

@panel-box-primary-color: #fb4c16;

デフォルトのメインカラーが青なので青っぽいところをオレンジに変更してます。

絵文字の無効化

ここからはテーマのための関数（function.php）に追記していきます。まずは絵文字の無効化。デフォルトだと「♂」記号とかが絵文字になっちゃうから。


// Disable Emoji（絵文字変換を無効）
add_action( 'init', function () {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );   
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); 
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
} );

著者に関する情報を削除

記事の著者のIDが表示されるとセキュリティ上よろしくないので見えないように封印します。私の場合、適当に変なIDにしてしまって変えられないだけなんですけども。

// Disable author page （投稿者名のアーカイブページを表示させない）
add_filter( 'author_rewrite_rules', '__return_empty_array' );

// Remove the meta author content.（各投稿の作者名を削除）
add_filter( 'beans_post_meta_item_author_text_output', '__return_false' );

// Remove the meta author wraping html tag.（作者名の横に表示される飾りを削除）
beans_remove_markup( 'beans_post_meta_item_author' );

「投稿日」の見た目を変更

本当はクロックアイコンだけにしたかったんだけど、よく分からずテキストを変更することにした。マンガとイラストのページは記事投稿日じゃなくて更新日を表示したいから。更新日は手動で更新してます。やり方がよく分から

// 投稿日メタ情報の横に「Posted on」クロックアイコンを追加
            beans_add_smart_action( 
  'beans_post_meta_item_date_prepend_markup',
  'beans_child_super_dev_meta_date_icon' 
);

function beans_child_super_dev_meta_date_icon() {
  echo beans_open_markup( 
    'beans_child_date_icon',
    'i', 
    'class=uk-icon-clock-o uk-margin-small-right uk-text-muted' 
    );
  echo beans_close_markup( 'beans_child_date_icon', 'i' );
}

// Modify "Posted on" text. （クロックアイコン横のテキストを変更）
add_filter( 'beans_post_meta_date_prefix_output', 'modify_posted_on' );
function modify_posted_on() {
return 'Updated on: ';
}

「もっと読む」のテキストを変更したかった

これは日本語で「続きを読む」に変えたかったけど日本語にするとエラーが出てしまったので、多分デフォルトのまんまです。いつでも変えられるように待機。

// Modify the read more text.（もっと読む テキストの変更）
add_filter( 'beans_post_more_link_text_output', 'example_modify_read_more' );

function example_modify_read_more() {

   return 'Read more';
   
}

その他をカスタマイズ

// Remove the breadcrumb.（パンくずリストの削除）
add_filter( 'beans_pre_load_fragment_breadcrumb', '__return_true' );

// ページネーションに記事タイトルを使用
add_filter( 'beans_previous_text_post_navigation_output', 'example_previous_text_post_navigation' );

function example_previous_text_post_navigation() {

  if ( $post = get_previous_post() ) {
    $text = $post->post_title;
  }
	
 return $text;

}

add_filter( 'beans_next_text_post_navigation_output', 'example_next_text_post_navigation' );

function example_next_text_post_navigation( $text ) {

 if ( $post = get_next_post() ) {
    $text = $post->post_title;
  }

 return $text;

}

// Remove the post navigation. 個別投稿を開いたときにページネーションを表示しない
beans_remove_action( 'beans_post_navigation' );

パンくずリストとは「マンガ>本編：リアルインベーダーゲーム>STAGE.01」みたいなやつです。これがデフォルトで表示されていてうざかったので削除しました。

あとはページネーション関連。カテゴリをまたいだ記事の時系列は重要じゃない、むしろ邪魔なので削除しました。本当はカテゴリごとにページネーションできるらしいんですけど、Beansだとうまく行かなかった。

参考：WordPressで個別記事のページネーションを同一カテゴリ内だけにする方法

結果、マンガページのページネーションを手動で付ける羽目になりました。別にいいけど。

外部CSSとJavaScriptの読み込み

最後はLuminous / Macy / Object fitを動かすための外部CSSとJavaScriptの読み込みです。プラグインで特定のページだけに適用することもできる（しかも簡単に）っぽいんですが、これ以上ブラックボックスに依存するのは良くないと思ったのでこの形に。

なので全ページにこれが読み込まれていて多少重くなっています。美しくない。仕方ない。

//外部CSSの読み込み
function twpp_enqueue_styles() {
  wp_enqueue_style(
    'sub-style',
    '../../../css/gallery_for_wp.css' 
  );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

//外部Javascriptの読み込み
function my_js_function() {
echo <<< EOM


    <!-- object-fit JS -->
    <script src="../../../js/ofi.min.js"></script>
    <script>objectFitImages('img.trim4-3');</script>

    <!-- Luminous JS -->
    <script src="../../../js/Luminous.js"></script>
    <script src="../../../js/Luminous-opt.js"></script>


    <!-- promise polyfill for Macy JS -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>

    <!-- Macy JS -->
    <script src="../../../js/macy.js"></script>
    <script>
        var macy = Macy({
            container: '#macy',
            columns: 3,
            margin: {
                x: 8,
                y: 14,
            },
            breakAt: {
                544: 2,
                375: 1
            }
        });
    </script>

</script>
EOM;
}
add_action( 'wp_footer', 'my_js_function' );
?>

あとは「ウィジェット」でメニューを作成して左側（デフォルトは右側）に配置したり、背景画像（グレーの格子状のやつ）を設置したりしました。

以上！

そんなとこです。昨年SQLite Integrationが配信停止となり、脱法WordPressがいつ使えなくなるか分からないのでバックアップがてらメモしたものでした。（使えなくなったらこの記事も飛ぶけどね）

«
»