【FREEDOM】fuctions.php【解説】

freedom

freedom Web Developer

ワードプレス用テンプレート「FREEDOM」の開発者。


無料のワードプレステーマ「FREEDOM」

「FREEDOM」テーマを利用してコーポレートサイトやオウンドメディアを作りたいという開発者さま向けに、
「FREEDOM」テーマで使用しているfunctions.phpのソースコードの解説をしたいと思います。
お役に立てると幸いです。

css・jsの読み込み

基本的には、header.php等にスクリプト読み込み用のタグを挿入するのではなく、

<?php wp_head(); ?>

で読み込ませるために、cssの読み込みやjsの読み込みはfunctions.phpで行っています。

cssに関しましては、bootstrapのアセットも含め、
scssディレクトリに含まれるstyle.scssから一発でstyle.cssを生成しています。

そのため、サイト全体のデザインに影響の出るような、例えば配色の変更や、余白などの変更も安易に変更が可能になっています。

jsに関しましては、
まず、masonryやその他のプラグイン等の整合性も考慮し、デフォルトのjqueryは読み込まず、URLを指定して読み込んでいます。
あとは、bootstrapのライブラリ、masonryのライブラリー、あとは独自のjsファイルを読み込む形になっています。

/**
 * cssやjsファイルの読み込み
 */
function freedom_zero_scripts() {
  //css file inset
	wp_enqueue_style( 'freedom_zero-style', get_stylesheet_uri() );

	//js file inset
  wp_deregister_script( 'jquery' ); // デフォルトのjqueryは読み込まない
  wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' , array(), '1.0', true);
  wp_enqueue_script('assets-bootstrap', get_template_directory_uri() . '/assets/javascripts/bootstrap.js', array(), '1.0', true );
  wp_enqueue_script( 'masonry', 'https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js', array(), '1.0', true );
  wp_enqueue_script('freedom_zero-original', get_template_directory_uri() . '/js/original.js', array(), '1.0', true );


	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'freedom_zero_scripts' );

ビジュアルエディター用のcssについて

ビジュアルエディターで固定ページや投稿を編集する際に、実際の画面に近しい形でデザインを表示させるためのeditor-style.cssを、
editorディレクトリに格納しています。

editor-style.cssも、editor-style.scssからstyle.scssを読み込む形で、一発で生成が可能となっています。

以下は、それを読み込む関数です。

/**
 * // ビジュアルエディアター用にcssの読み込み
 */
add_action( 'admin_init', 'child_theme_set' );

function child_theme_set() {
  remove_editor_styles();
add_editor_style( get_stylesheet_directory_uri() . '/editor/editor-style.css'); }

テーマカスタマイザーや独自定義のテンプレートタグの設定ファイルの読み込み

テーマカスタマイザー用の設定ファイルなどを、機能ごとにまとめてincディレクトリに格納しています。
そのため、不要な機能があればコメントアウト等をして読み込まないようにして頂くことも可能です。

/**
 * テーマカスタマイザー用の設定ファイル読み込み
 */
require get_template_directory() . '/inc/custom-header.php'; //メインビジュアルの背景設定
require get_template_directory() . '/inc/template-tags.php';
require get_template_directory() . '/inc/extras.php'; //ショートコードとか
require get_template_directory() . '/inc/customizer.php';
require get_template_directory() . '/inc/custom-logo.php'; //ロゴの設定
require get_template_directory() . '/inc/custom-main-visual.php'; //メインビジュアルの設定
require get_template_directory() . '/inc/custom-color.php'; //色変更
require get_template_directory() . '/inc/custom-layout.php'; //レイアウト変更
require get_template_directory() . '/inc/custom-index.php'; //TOPページの設定
require get_template_directory() . '/inc/nora-settings.php'; //野良テーマ用のセッティング(公式ディレクトリ登録で弾かれる機能)
require get_template_directory() . '/inc/jetpack.php'; //jetpackプラグイン利用の場合のサポートファイル
require_once ('inc/wp_bootstrap_navwalker.php'); // ワードプレスのナビゲーション機能をbootstrapで使えるようにする

// カスタマイザー用にオリジナルのチェックボックスの用意
function my_sanitize_checkbox( $input ) {

  if ( $input == true ) {
    return true;
  } else {
    return false;
  }
}
// カスタマイザー用にオリジナルのラジオボタンの用意
function my_sanitize_choices( $input, $setting ) {
    global $wp_customize;
    $control = $wp_customize->get_control( $setting->id );
    if ( array_key_exists( $input, $control->choices ) ) {
        return $input;
    } else {
        return $setting->default;
    }
}

ユーザー情報の項目追加・削除

企業やご利用用途によっては、複数のユーザーがサイトに登録して、ブログを書くケースがあるかと思います。
その際のプロフィールの編集について、あまり利用機会が少ないと思われる項目を非表示にするようにしています。
aim、jabber、yimのアカウントなどです。

状況に合わせてコメントアウト等してご利用ください。

また、逆に投稿ページの筆者のプロフィール欄に表示させる目的で、以下の
「twitter」 ・・・ ご自身のtwitterアカウントのURLを入力してください。
「facebook」 ・・・ ご自身のfacebookアカウントのURLを入力してください。
「job」 ・・・ あなたのご職業や役職などをご記入ください。
の3項目を追加しています。

これらは未記入の場合、ただ表示されないだけですので、特に入力しないでも何も不都合はございません。

// ユーザー情報入力項目の追加
function update_profile_fields( $contactmethods ) {
    unset($contactmethods['aim']);
    unset($contactmethods['jabber']);
    unset($contactmethods['yim']);
    $contactmethods['twitter'] = 'Twitter';
    $contactmethods['facebook'] = 'Facebook';
    $contactmethods['job'] = __('job', 'freedom_zero');

    return $contactmethods;
}
add_filter('user_contactmethods','update_profile_fields',10,1);

改行タグについて

ワードプレスでは、ビジュアルエディターやテキストで、固定ページや投稿ページの内容を編集すると、自動で

<br>や<p>

などの改行タグなどが含まれる設定となっていますが、

この「FREEDOM」テーマでは、固定ページでは改行タグなどが自動で含まれないような設定にしています。
投稿ページでは段落を空けると自動で改行タグが入るようになっていますので、

他のテーマからの移行や他のテーマに切り替える場合など、その部分を念頭において頂けますと幸いです。

/**
 * 固定ページで改行タグ等入れないようにする
 */
function disable_page_wpautop() {
  if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

その他

以下は、サイト高速化のために削ってしまいたいメタ要素などを表示させないためのコードです。
逆に、ご利用用途によっては、これにより、不具合が発生するケースもありますので、ご要望に合わせて適宜、コメントアウト等して使用してください。

// 勝手に読み込んでしまう絵文字を読み込まないようにする
function disable_emoji() {
     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_action( 'init', 'disable_emoji' );

// hentry出力しない
function remove_hentry( $classes ) {
    $classes = array_diff($classes, array('hentry'));
    return $classes;
}
add_filter('post_class', 'remove_hentry');

// 要らんメタタグの発生を防ぐ
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_generator' );

この記事の著者

freedom

ワードプレス用テンプレート「FREEDOM」の開発者。

facebook web

関連する記事