WordPressのヘッダ画像の上にメニューボタンを追加

サイトを作ってたんだった。

よく考えたら、実はサイトを作ってたわけで、
まだまだ作ってる途中なので、BLOGだけは書いてたわけで。

ってことで、なかなかいいテーマが見つからないので、ちょっとカスタムを的な。
そんな話です。

ヘッダ画像の上にメニュ－ボタンをつけたかっただけなんだけど。。

まぁよくある感じのやつではあるんだけど、、
そういうのに対応したWordPressのテーマとかさがしてたら、

やたらめったら重くて複雑でそこまでいらん！

みたいなのばっかりで。
そういえば、数年前はかなりWordPressのカスタムをしてたのを思い出し、

あぁー、hedder.phpの書き換えとかじゃなくて、
PLUGINつくった方が全然ラクだったんだった。

ってことで、今日は、プラグインをつくります。
さすがに数年前のことなので、忘れてることも多くて。^^;

プラグインはファイルを１つつくればそれで認識してくれるのです。

そうなのです。PHPを１つつくって、
先頭にこんな記述をつけとけば、それでOKなのです。

<?php
/*
Plugin Name: finred_custom
Plugin URI: http://finred.hanahata.red/xxxxxx
Description: finred_custom
Author: hiraide
Version: 0.1
Author URI: http://finred.hanahata.red
*/

でも、中身が無いとなにもできないので、とりあえず、やりたいことはjavascriptなので、
それをロードするものを書きますね。

add_action( 'wp_enqueue_scripts', 'finred_wp_enqueue_scripts' );
//---------------------------------------
function finred_wp_enqueue_scripts(){
	$jsurl = FINRED_CUSTOM_PLUGIN_URL . "/finred_custom.js";
	$jsurl .= "?a=" . getTimeStr();
	$cssurl = FINRED_CUSTOM_PLUGIN_URL . "/finred_custom.css";
	$cssurl .= "?a=" . getTimeStr();
	wp_enqueue_script( 'finred_custom.js', $jsurl, false );
	wp_enqueue_style('finred_custom.css',$cssurl);
}
//---------------------------------------

そう、javascriptとcssを読み込む部分だけです。
いまのところ。

javascript＆CSS

javascript部分はこんなで。

var finRed = function() {
	var a = 0;
	this.test = function(){
		test();
	}
	var test = function(){
		console.log("finRed::test");
	}
	this.init = function(){
		init();
	}
	var init = function(){
		console.log("finRed::init");
		jQuery(function ($) {
			setTimeout(function(){
				var selecta	= ".thum_on_title div.container";
				var headText = "<div class='hiraide' ";
				headText += "style='";
				headText += "'>ひらひら</div>";
				$(selecta).html(headText);
				$('.hiraide').on('click',function(e){
					alert("under construction!");
				});
			},2000);
		});
	}
}
//------------------------------------------------
var FRD = new finRed;
FRD.init();
//------------------------------------------------

CSSはこんなで。


.tagcloud a {
    box-shadow: 0 0px 0px 0 rgba(0,0,0,0), 0 0px 0px 0 rgba(0,0,0,0);
}

.hiraide{
	box-sizing:border-box;
	width:200px;
	font-size:large;
	text-align:center;
	vertical-align:middle;
	border-radius:20px;
	padding:10px 10px 10px 10px;
	background-color: #ff2080;
	cursor:pointer;
}
.hiraide:hover {
	opacity:0.5;
}

まぁ、.tagcloud a部分は、再度メニューのタグの影が気に入らなかったので。^^;

確認

こんなんでも、
/wp-content/plugins以下にフォルダ作ってつっこんでやれば、
こんな感じで認識されます。

で、とりあえず、こんなんで。

WordPressのヘッダ画像の上にメニューボタンを追加

コメントする コメントをキャンセル

コメントするコメントをキャンセル