WordPressのぷちカスタマイズまとめ

2019.05.26

Nishikiのカスタマイズ以外で、このサイトに施しているWordPressのカスタマイズメモをまとめてみました。ここにあるものはプラグインを使わないやり方&jQueryプラグインを使ったものになるので、人によってはちょっと難しいかも。

Caution

このカスタマイズはwp-config.phpやfunction.phpに加筆するタイプのものになります。記述を誤るとサイトが真っ白になるので事前に必ずバックアップをお取りください。

またカスタマイズは自己責任でお願いします。

自動保存&リビジョンを無効化する

WordPressはデフォルトのままだと1分毎に下書きを自動保存します。リビジョンとは、この自動保存されたものに加えて、編集時に保存されるバックアップをあわせたものの集合体です。放置するとDBの領域をどんどん圧迫するので潔くキルします。

まずfunction.phpに自動保存を無効化するコマンドを記入。

// 自動保存の無効化
function disable_autosave() {
    wp_deregister_script('autosave');
    }
    add_action('wp_print_scripts','disable_autosave');

次にwp-config.phpを開き、define('WP_DEBUG', false);の次の行に以下を記述。

define('WP_POST_REVISIONS',false);

なおリビジョンを無効にするのではなく、回数制限にしたいという場合はfalseを任意の数字に書き換えてあげればオッケー。

固定ページにもカテゴリを付けられるようにする

通常、固定ページにはカテゴリを付与することが出来ませんが、function.phpに以下のコードを書き加えることによって固定ページの投稿画面にカテゴリー選択画面が出るようになり、カテゴリーを付けられるようになります。ただし使用しているテーマによっては出来ない場合もありますので、改造は自己責任で。

// 個別ページのカテゴリー紐付け
add_action( 'init', 'add_categories_for_pages' ) ;
function add_categories_for_pages()
{
    register_taxonomy_for_object_type( 'category', 'page' ) ;
}
add_action( 'pre_get_posts', 'nobita_merge_page_categories_at_category_archive' ) ;
function nobita_merge_page_categories_at_category_archive( $query )
{
    if ( $query->is_category== true && $query->is_main_query()){
        $query->set( 'post_type', array( 'post', 'page', 'nav_menu_item' )) ;
    }
}

絶対パス(フルパス)を相対パスにする

デフォルトでフルパスを出力する所を、ルートを基準にした相対パスで出力させるようにする為のカスタマイズ。http→httpsに移行した時や、サイトのURIが変わった時にリンク切れが発生しにくくなります。パーマリンク用も設定。

function.phpに以下を記入。

//絶対パス→相対パス
function make_href_root_relative($input) {
    return preg_replace('!http(s)?://' . $_SERVER['SERVER_NAME'] . '/!', '/', $input);
}

//パーマリンク絶対パス→相対パス
function root_relative_permalinks($input) {
    return make_href_root_relative($input);
}
add_filter( 'the_permalink', 'root_relative_permalinks' );
WordPressのリンクのパスを絶対パスから相対パスに変更する方法 - ホームページ制作会社 横浜 株式会社ウィル
WordPress内のリンクを絶対パスから相対パスに変更する方法を紹介します。 WordPressは、動的にサ
www.will-hp.com

外部CSS/JavaScriptファイルを一括読み込み

WordPressで外部ファイルを読み込ませる場合、直接headタグ内に記述するのではなく、wp_enqueue_scriptを用いた方法で読み込ませることが推奨されています。ここではこの関数の説明は省略しますので、より詳しく知りたい方はCodexのwp_enqueue_script関数リファレンスのページへどうぞ。

function.phpに以下を記述。

/* 外部CSS/JS読み込み */
function add_css_js() { //関数名add_css_js()を作成
//CSS
    wp_enqueue_style( 'Lato', 'https://fonts.googleapis.com/css?family=Lato:400,400i,500,700' );
    wp_enqueue_style( 'Raleway', 'https://fonts.googleapis.com/css?family=Raleway:400,600,700,800' );
    wp_enqueue_style( 'echo',  home_url() . '/common/css/echo.min.css' );
    wp_enqueue_style( 'plugins',  home_url() . '/common/css/plugins.css' );
    wp_enqueue_style( 'smart-grid',  home_url() . '/common/css/smart-grid.css' );
    wp_enqueue_style( 'prism-css', home_url() . '/common/css/prism.css' );
    wp_enqueue_style( 'style', get_stylesheet_uri() );

//JavaScript
//条件分岐を使って管理画面では読み込ませないようにする
if ( !is_admin() ) {
    wp_enqueue_script( 'prettyquote', home_url() . '/common/js/jquery.prettyquote.js', array('jquery'), false,true);
    wp_enqueue_script( 'scripts', home_url() . '/common/js/scripts.js', array('jquery'), false,true);
    wp_enqueue_script( 'prism-js', home_url() . '/common/js/prism.js', array('jquery'), false, true);
	}
}
//関数名add_scripts()を表側で呼び出す
add_action('wp_enqueue_scripts', 'add_css_js');

jQueryを利用したスムーズスクロールをつける

Nishikiのトップへ戻るリンクはページ下部で固定になっています。

文章量の少ない所ならそれでもいいかもしれませんが、うちのサイトのように長いエントリがある場合にはこれがないと不便です。なので、デフォルトのトップへ戻るリンクを削除し、代わりにjQueryを使った簡単なスムーススクロールを実装しました。ソースコードは寝ログさんで公開されているものをそのまま使用させていただきました。

WordPressで使える、jQueryで「トップへ戻る」ボタンの作り方
最近、後学のためにWordpressのテーマを作ってます。 ちょうど「トップへ戻る」ボタンをつけたいと思ってい…
nelog.jp

外部JSファイルに以下を記述。

jQuery(function(){
    jQuery(window).scroll(function(){
      //最上部から現在位置までの距離を取得して、変数[now]に格納
      var now = jQuery(window).scrollTop();
      //最上部から現在位置までの距離(now)が600以上
      if(now > 600){
        //[#page-top]をゆっくりフェードインする
        jQuery('#page-top').fadeIn('slow');
        //それ以外だったらフェードアウトする
      }else{
        jQuery('#page-top').fadeOut('slow');
      }
    });
    //ボタン(id:move-page-top)のクリックイベント
    jQuery('#move-page-top').click(function(){
    //ページトップへ移動する
    jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
    });
  });

次に、トップへ戻るためのリンクを<?php wp_footer(); ?>または</body>の直前に記述しておきます。

<p id="page-top">
<a id="move-page-top"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>
</p>

最後にボタンデザインをCSSで調整して完成です。

#page-top{
  position:fixed;
  right:3em;
  bottom:1.5em;
  display: none;
  z-index:9999;
}

#page-top a{
  color: #fff;
  padding: 1em;
  text-decoration:none;
  display:block;
  cursor:pointer;
  text-align:center;
  background:#0BA5C6;
  line-height:100%;
  border-radius: 5px;
  -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
}

#page-top a:hover{
  color: #0BA5C6;
  background:#21252B;
  -webkit-transition:all 0.3s;
  -moz-transition:all 0.3s;
  transition:all 0.3s;
}
タイトルとURLをコピーしました