初心者functionsカスタマイズ

WorldPress初心者向け・functions.phpのカスタマイズCocoon
この記事は約10分で読めます。
QOOPY
QOOPY

worldPress初心者向けのfunctions.phpのカスタマイズ、忘備録でもあります。ほとんどコピペですが、参考サイトの紹介とミニ解説付きです。

functions.phpに追加したもの

  • 管理画面にパーマリンクを追加(投稿画面のみ)
  • 固定ページをphpからhtmlに変更(投稿ページはCustom Permalinksプラグインを使用)
  • headerロゴ下にウイジェットエリア追加
  • 管理画面にタイトル数の表示
  • ショートコードのカテゴリーラベルの表示
  • ついでに表示を子カテゴリーに統一

子テーマのfunctions.phpに追記しているのは実用的に利便性が優れたものがほとんどです。

管理画面にパーマリンクの表示と固定ページをhtmlに変更

管理画面にパーマリンクの表示をした理由は記事を書くときに便利なので、それとページ数の確認にもなります。

固定ページをhtmlに変更したのは、静的サイトからWordPressへ移転してアドレスを変えることができないので今まで通りhtmlにしました。移転する際にまず最初にやったコードの追加です。

まずは管理画面の投稿一覧にパーマリンクを追加のコードです
functions.phpに追加していきます

管理画面にパーマリンクの表示
(管理画面にパーマリンクの表示)
コジロー先生
コジロー先生

コードを変更するときは必ずバックアップを取る習慣を付けよう!

//WordPress 管理画面の投稿一覧にパーマリンクを追加//
function add_custom_column( $defaults ) {
  $defaults['permalink'] = 'パーマリンク';
  return $defaults;
}
add_filter('manage_posts_columns', 'add_custom_column');
 function add_custom_column_id($column_name, $id) {
  if($column_name == 'permalink'){
    echo get_permalink();
  }
}
add_action('manage_posts_custom_column', 'add_custom_column_id', 10, 2);

固定ページをhtmlに変更するコード
参考にしたサイト

WordPress 固定ページのパーマリンクの拡張子を .html にする方法 - by Takumi Hirashima
WordPress で固定ページのパーマリンクの拡張子を .html にする方法をご紹介します。例えば、既存サイトを WordPress 化した後に、CMS化前のサイトと同じアドレスにしたい時に便利な方法です。
//固定ページのURLに.html//
add_action( 'init', 'mytheme_init' );
if ( ! function_exists( 'mytheme_init' ) ) {
function mytheme_init() {
global $wp_rewrite;
$wp_rewrite->use_trailing_slashes = false;
$wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
// flush_rewrite_rules( false );
}
}

投稿ページは Custom Permalinksプラグイン

Custom Permalinks
Set custom permalinks on a per-post, per-tag or per-category basis.

プラグインをインストールし記事を書く際に好きなパーマリンクを書きます、htmlに変更すのはWordPressのパーマリンク設定でカスタム構造に選択したらhtmlになるように書き込みす。
参考サイト

Wordpressのパーマリンクをhtml化する方法
【スマホ対応】ワードプレスのパーマリンクの設定で末尾をhtmlにする方法、途中でパーマリンクを変えるとダメな理由など解説。

headerロゴ下にウイジェットエリア追加

ウイジェットエリアに追加した理由はヘッダーに検索窓を設置したい!というのが大きな理由です。ですが好きな場所にウイジェットエリアが追加できるなんでさすがWordPressだな~と感じました。詳しくは別ページに設置の仕方を載せています。
Cocoonカスタマイズ・ヘッダーに検索窓を表示する方法

404 NOT FOUND | 着物リメイクの可能性、変わらなく良いものを・着物リメイク雑記帳

ソースコードはこちら。

// ヘッダーロゴの下に出力をする//
 add_filter('wp_header_logo_after_open', 'add_header_contents');
 function add_header_contents() {
     dynamic_sidebar('add-header-contents');
 }
// アナウンス枠エリアウィジェット//
if (function_exists('register_sidebar')) {
    register_sidebar(array(
            'name' => 'ヘッダー領域追加コンテンツ',
            'id' => 'add-header-contents',
            'description' => 'ヘッダー領域に追加コンテンツを表示するウィジェットです。',
            'before_widget' => '<div class="add-header-contents">',
            'after_widget' => '</div>',
    ));
}

管理画面にタイトル数の表示をする

管理画面一覧にタイトル文字数追加
(管理画面一覧にタイトル文字数追加)

使っているCocoonのテーマには投稿記事を書く画面にはSEOタイトル文字数が表示がありますが、どうしても一覧表示画面に表示したいので追加しました。
本文の文字数も一緒にみれるし、伝わる文字数もおおよそ考えれるので便利です!
参考にしたサイトはCocoonの開発者のわいひらさんです。

WP管理画面でタイトル文字数カウンターを表示するカスタマイズ方法(旧ビジュアルエディター用)
SEO的にタイトルタグの文字数は、32文字が良いとよく言われています。 中には、「28文字だ」とか、「30文字…

ソースコードはこちら。

//管理画面一覧タイトル文字数カウンター//
function count_title_characters() {?>
<script type="text/javascript">
jQuery(document).ready(function($){
function count_zen_han_characters(str) {
      len = 0;
      str = escape(str);
      for (i=0;i<str.length;i++,len++) {
        if (str.charAt(i) == "%") {
          if (str.charAt(++i) == "u") {
            i += 3;
            len++;
          }
          i++;
        }
      }
      return len / 2;
    }

  function count_characters(in_sel, out_sel) {
    $(out_sel).html( count_zen_han_characters($(in_sel).val()) );
  }

 ?$('#titlewrap').after('<div style="position:absolute;top:-24px;right:0;color:#666;background-color:#f7f7f7;padding:1px 5px;border-radius:2px;border:1px solid #ccc;">文字数 :<span class="wp-title-count" style="margin-left:5px;">0</span></div>');

  count_characters('#title', '.wp-title-count');

  $('#title').bind("keydown keyup keypress change",function(){
    count_characters('#title', '.wp-title-count');
  });

});
</script><?php
}
add_action( 'admin_head-post-new.php', 'count_title_characters' );
add_action( 'admin_head-post.php', 'count_title_characters' );

ショートコードのカテゴリーラベルの表示する方法

ショートコードにカテゴリーを表示
(ショートコードにカテゴリーを表示)

ショートコードの時はカテゴリー表示がないんですね、ほとんど自分が見たときのに忘備録なのですが(カテゴリーが多いので)。
見た目もわかりやすくて良いので追加しています。

サムネイル上のカテゴリーラベルの表示を切り替えるカスタマイズ方法
サムネイルやアイキャッチの上に重なっているカテゴリーラベルの表示切替フックの利用方法です。
//ショートコードのカテゴリーラベルの表示//
add_filter('is_widget_entry_card_category_label_visible', '__return_true');

カテゴリラベル表示 を子カテゴリーに統一

ラベルの表示子カテゴリで統一する
(ラベルの表示子カテゴリで統一する)

当サイトの場合「QOOY’S NOTE」が親カテゴリーで子カテゴリーは表示されないと、わかりにくいんですよね。子カテゴリーが表示されることで読者の方にもわかりやすく役に立つのではないかと思いまして追加しました。
参考したサイト

【Cocoon】カテゴリラベル表示のカスタム方法⇒『親カテゴリ表示に統一』『子カテゴリ表示に統一』『カテゴリ毎に指定』
こんにちわ、あめあられ です! 本記事では、WordPressの無料テーマである『Cocoon』のカテゴリラベル表示のカスタム方法について記載させて頂きます。 本記事は親と子の2階層でのカテゴリラベル表示についてです 本記事の対象者 本記事
//カテゴリラベル(アイキャッチのカテゴリ表示)を子カテゴリで統一する//
function get_the_nolink_category($id = null, $is_visible = true){
  if ($id) {
    $categoryArray = get_the_category($id);
  } else {
    $categoryArray = get_the_category();
  }
  $display_class = null;
  if (!$is_visible) {
    return;
  } 
  if (isset($categoryArray[0])) {
    $ret = $categoryArray[0];
    foreach($categoryArray as $category)
    {
      if($category->category_parent != 0)
      {
        $ret = $category;
        break;
      }
    }
    return '<span class="cat-label cat-label-'.$ret->cat_ID.'">'.$ret->cat_name.'</span>';
  }
}

functions.phpカスタマイズについて

そもそもfunctions.phpってなに?て思ういますよね、functions.phpはWordPressの基幹を担っているファイルです。そう、とっても大事なファイル。
関数を定義しておいたり、ショートコードというコードを用意しておいたり、WordPressを使う上で必要なコードを記述しておくことができるのです。

なので、初心者がイジるのはかなり怖いので必ずバックアップを取ることで直しがききます。記述を失敗してWebサイトが真っ白になることもあるので(汗)気をつけてください。

本当はfunctions.phpのカスタマイズはなるべくしたくないのが本音ですが・・・
こうだったら便利だな~と思うことができるWordPressの関数を知ってしまうと・・・恐ろしい中毒を引き起こします。(カスタマイズ病)

QOOPY
QOOPY

最後に・・・
やっとWordPressの使い方がわかってきたこの頃。
カスタマイズも終盤?となってきたので次は内容の充実化を図っていきます。worldPress初心者でもコピペ(バックアップを取ることを忘れないで!)でとても便利使えるんですね!すごい、本当です、

追記

ページスピード改善で追加したコード

  • jetpackのCSS非表示(ほとんど使わないの)
  • レンダリングブロックしているJavascriptの読み込みを遅らせる
    (wp_headで読む込みをwp_footerにする、これだけで随分改善)
  • レンダリングブロックしているGutenbergエディターとプラグインのCSSを読み込みを遅らせる
    (Gutenbergエディターは使っているので削除はしませんでした)
タイトルとURLをコピーしました