初心者が月10万稼ぐ為の記録11 WordPressでオリジナルテーマのブログサイトを作成

#WordPressでblogサイトを作成

完成したらここにURLを貼ります。

###まだ途中ですがfunctions.phpに追加した機能を解説

サムネイル追加
投稿、固定ページでサムネイル画像が追加できる。

メニュー機能追加
自分のブログでいえば、プログラミング、ゲーム、映画、雑記、問い合わせのグローバルメニュー、
フッターにもポートフォリオのメニューがあるので
それを管理画面で自由にカスタマイズできる機能を追加

タイトルタグの設定
add_theme_support( 'title-tag' );

ページのタイトルは、 head 要素内の title タグ（

～）を使って記述します。

WordPress の場合、従来はタイトルの出力は header.php 等のテンプレートの

タグ内で
wp_title() を使って以下のような記述をしていましたが、WordPress4.1 からタイトルタグは タグ内に記述しなくても、functions.php に以下を記述すれば、WordPress がページ種類に応じてタイトルタグを自動的に表示（挿入）してくれるようになりました。

使用する場合は

タグは記述しません（記述すると二重に出力されてしまいます）。

ウィジェットの登録
サイドバーとフッターを管理画面で管理できるようにする。

<?php
/*サムネイル追加*/
add_theme_support('post-thumbnails');

/*メニュー機能追加*/
register_nav_menus(
array(
'gloval-navigation' => 'グローバル', 
'footer-navigation' => 'フッター',
)
);

/*タイトルタグの設定*/
add_theme_support( 'title-tag' );

/*ウィジェットの登録*/
function my_widgets_init() {

	register_sidebar( array(
		'name' => 'サイドバー',
		'id' => 'sidebar_widgets01',
		'before_widget' => '<div class="container bg-white mb-5 py-5 shadow-sm p-3">',
		'after_widget' => '</div>',
    ) );

	register_sidebar( array(
		'name' => 'フッターAbout',
		'id' => 'footer_widgets01',
		'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title'  => '<h4 class="d-inline-block py-3 border-bottom border-info">',
        'after_title'   => '</h4>',        
    ) );
    
	register_sidebar( array(
		'name' => 'フッターTwitter',
		'id' => 'footer_widgets02',
		'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title'  => '<h4 class="d-inline-block py-3 border-bottom border-info">',
        'after_title'   => '</h4>',        
	) );    
}
add_action( 'widgets_init', 'my_widgets_init' );


/**
 * スクリプトとスタイルを正しくエンキューする方法
 */

/*テンプレート用のCSSファイル読み込み*/
function my_template_css() {
	wp_enqueue_style( 'my-template-style', get_stylesheet_uri() );
  }
  add_action( 'wp_enqueue_scripts', 'my_template_css' );

/*サイト共通のCSSの読み込み*/
function my_styles() {
	wp_enqueue_style('my-style', get_theme_file_uri('/css/style.css'));
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

/*Bootstrap読み込み*/
function my_template_bootstrap() {
	wp_enqueue_style(
		'my-template-bootstrap',
		'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css',
	);
  }
  add_action( 'wp_enqueue_scripts', 'my_template_bootstrap' );


function add_my_scripts() {	
	//jQuery を CDN から読み込む
	// wp_enqueue_script(
	// 	'jquery', 
	// 	'https://code.jquery.com/jquery-3.5.1.slim.min.js', 
	// 	array(), 
	// 	'3.5.1', 
	// 	true //</body> 終了タグの前で読み込み
	// );

	//WordPress 本体の jQuery を登録解除
	wp_deregister_script( 'jquery');  

	//jQuery を CDN から読み込む
	wp_enqueue_script(
		'jquery', 
		'https://code.jquery.com/jquery-1.12.4.min.js', 
		array(), 
		'1.12.4', 
		true //</body> 終了タグの前で読み込み
	);

	//script.js の読み込み
	wp_enqueue_script( 
		'base-script', 
		get_theme_file_uri( '/js/script.js' ), 
		array( 'jquery' ), //依存ファイルは上記の jquery
		filemtime( get_theme_file_path( '/js/script.js' ) ), 
		true
	);
	
	//jQuery を CDN から読み込む
	wp_enqueue_script(
		'jsdelivr', 
		'https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js', 
		array(), 
		'1.16.0', 
		true //</body> 終了タグの前で読み込み
	);
	
	//jQuery を CDN から読み込む
	wp_enqueue_script(
		'bootstrap-js', 
		'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', 
		array(), 
		'4.5.0', 
		true //</body> 終了タグの前で読み込み
	);	
}
add_action('wp_enqueue_scripts', 'add_my_scripts');


/**
 * 	ボタン ショートコード
 */

 function my_theme_shortcode ($atts, $content = "") {
	return '<a href=" '. $atts['link'] . ' "class = "btn '. $atts['class'] .' " > ' . $content .'</a>';
 }
 add_shortcode ( 'btn' , 'my_theme_shortcode' );