php /WordPress

【wordpress】Ulikeのボタンを独自の好きなところに設置させる方法

wpで独自の「いいね」ボタンを設置できるプラグイン『WP Ulike』。

管理画面からある程度の設定はできるのですが、「記事一覧ページにいいねボタンを設置させたい」とか「特定のpostsループにもいいねボタンを取り付けたい!」となると、デフォルトの機能だと存在しないです。

なので、$post_idを渡すことで好きな場所でいいねボタンを生成できるようにしてみました。

動作確認したWP Ulikeversion 2.4.2 wpのバージョンはWordPress 4.7.3です。

$post_idからulikeボタン を表示させるコード

themeファイルの functions.phpに追記してください。

// Ulike button output;
if( !function_exists('get_the_ulike_btn') ){
	function get_the_ulike_btn( $post_id ){
		global $wp_ulike_class,$wp_user_IP;

		$get_post_meta = get_post_meta($post_id, '_liked', true);
		$get_like = $get_post_meta != '' ? $get_post_meta : 0;
		$return_userID = $wp_ulike_class->get_reutrn_id();
		$theme_class = wp_ulike_get_setting( 'wp_ulike_posts', 'theme');

		$data = array(
			"id" => $post_id , //Post ID
			"user_id" => $return_userID, //User ID (if the user is guest, we save ip as user_id with "ip2long" function)
			"user_ip" => $wp_user_IP, //User IP
			"get_like" => $get_like, //Number Of Likes
			"method" => 'likeThis', //JavaScript method
			"setting" => 'wp_ulike_posts', //Setting Key
			"type" => 'post', //Function type (post/process)
			"table" => 'ulike', //posts table
			"column" => 'post_id', //ulike table column name 
			"key" => '_liked', //meta key
			"cookie" => 'liked-' //Cookie Name
		);

		//call wp_get_ulike function from class-ulike calss
		$counter = $wp_ulike_class->wp_get_ulike($data);
		$wp_ulike = '<div id="wp-ulike-'.$post_ID.'" class="wpulike '.$theme_class.'">';
		$wp_ulike .= '<div class="counter">'.$counter.'</div>';
		$wp_ulike .= '</div>';
		$wp_ulike .= $wp_ulike_class->get_liked_users($post_ID,'ulike','post_id','wp_ulike_posts');
		echo $wp_ulike;
	}
}

あとは、好きなとこと(postのループなど)で get_the_ulike_btn( $post_id ); を呼び出してあげれば、ULikeボタンを好きなところで呼び出すことができます。

記事一覧でUlikeボタンを表示させる例

<!-- ループ開始 -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
	<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
	<!-- Ulikeのボタンを表示 -->
	<small><?php get_the_ulike_btn( '$post->ID' ); ?></small>
	<!-- 日時を表示 -->
	<small><?php the_time('F jS, Y'); ?></small>
	<!-- 投稿の本文をdiv内に表示 -->
	<div class="entry">
	<?php the_content(); ?>
	</div>
	<!-- 投稿のカテゴリーをコンマ区切りで表示 -->
	<p class="postmetadata">Posted in <?php the_category(', '); ?></p>
</div> <!-- 最初の div ボックスを閉じる -->
<!-- “else”部分を除いたループ終了 -->
<?php endwhile; endif; ?>

サンプルコードの一部はWordpress Codex 日本語版のこちらのページからお借りさせていただきました。

BitnamiのCloud Launcherで建てたWPからBitnami のバナーを非表示にする方法

前回の投稿で、GCP上で簡単にWPをたてる方法をご紹介したのですが、そのまま運用するにはちょっとだけ問題があります。

それが、この右下に表示されているBitnamiのバナーです。。。。

このバナーの消し方がなかなかわからずに、少し前まではCSSで無理やり Display : none;して見えなくしたりとやっていたのですが、管理画面でも表示されてしまうところにはstyle.cssでは指示が届かないので functions.php で指示することになるし、、、と困った存在だったのですが、ちゃんと非表示にする方法が存在しましたのでご紹介します。

簡潔に終わらすと、ssh接続して、

cd apps/wordpress
sudo ./bnconfig --disable_banner 1

で終わりです。

では、あまりターミナルとか触らなかったりする方向けに詳しく説明していきます。

※Gcloudコマンドを利用します 多分導入してなくてもブラウザ上からもいけると思いますが。。。)

まず、管理画面のトップからメニューを開いて、Compute Engineに移動します。

すると現在のプロジェクトで管理されているインスタンスの一覧が表示されます。

この中でBitnamiで導入されたインスタンスを見つけて、SSH隣の▼マークから「gcloudコマンドを表示」を押下します。

(直接SSHをクリックしてブラウザ上から編集することもできます、Gcloudコマンドが使えない方はこちらを使ってやってみてください)

ポップアップでコマンドが表示されるので、コピーしてください。

ターミナルを開いて先ほどコピーしたコマンドをペーストし、GCEのインスタンスにSSH接続します。

下記のコマンドを実行します

cd apps/wordpress
sudo ./bnconfig --disable_banner 1

これで完了です!!

快適なwordpressライフをお過ごしください!

あとは、ネームサーバーなどを取得してDNS設定をIPアドレスでやるくらいですね!

[GCP]Google Cloud PlatformでCloud Launcherを使ってWPをインストール

Google Cloud Platform(以下 GCP)で、WordPressを導入する方法です。

少し前まではCompute Engineでサーバーを建てて、ミドルウェアの設定から行ってWordPressの設置を行う工程で対応していたのですが、CloudLauncherを使うと、恐ろしく簡単にWordPressの導入ができることを(今更ながら)知りました。。。

GCPの管理画面

プロジェクトを作成した先の、管理画面トップからご説明します。プロジェクトの作成までは、きっともっとわかりやすいブログがあると思うので、調べてみてください。

CloudLauncherの画面へ

管理画面の左上のメニューボタンからメニューを開いて、CloudLauncherに移動してください。

CloudLauncherのページに遷移したら、検索窓でWordPressと検索してください。

いくつか候補がでてきますが、今回は一番右のBitnamiが開発したWordPressを選択します。

Googleが開発したものでもいいのですが、デフォルトのインスタンスのスペックがちょっと高いため、値段が高くなるので、Bitnamiさんのを選択してます。(設定は簡単に変えられるんですけどね)

WordPressLauncherを起動

Compute Engine上で起動

画面が遷移したら、一番下までスクロールしてデプロイを押下してください。

この画面で、インスタンスのスペックの変更やファイヤーウォールの設定ができますので、ご希望の場合は変更してください(後からでもComplute Engineから変えられます)

少し待つと、このような画面になります。

 

この右っかわにログインURLとユーザー名、パスワードが表示されます。

WordPressの導入が完了!

 

これで導入完了です!

すごいお手軽ですね!!

ちなみに、デフォルトの設定のままだと右下にBitnamiの宣伝バナーが表示されてしまいます。CSSなどで無理やり非表示にする方法もあるのですが、きちんとした無効化の手法もあるので、また今度紹介します。

Bitnamiの宣伝バナーを非表示にする方法についてはこちら

[WordPress]カスタム投稿タイプの投稿が特定カテゴリーに紐付いているかチェックする

WordPressの独自テーマの作成中に、カスタム投稿タイプのsingleページにて、
その投稿($post)が特定のカテゴリー(taxonomy)に紐付いているか。
をチェックしたかったのですが、いかんせん上手く行かなかったので書き残します。

書いたコード

$is_hoge_taxonomy で条件を切れるようにしたかったので、
get_the_terms( POST_ID , TAXONOMY_NAME );
でカテゴリー(taxonomy)の一覧を取得して、その中に特定のカテゴリーが存在するかをチェックしています。

<?php
the_post();
$terms = get_the_terms($post->ID,'plan_taxonomy');
$is_hoge_taxonomy = false;
if($terms):
	foreach($terms as $term):
		if($term->slug == ‘hoge’){
			$is_hoge_taxonomy = true;
		}
	endforeach;
endif;
?>

ハマったポイント

get_the_terms( POST_ID , TAXONOMY_NAME );
TAXONOMY_NAMEに何を入れるのかがさっぱりわからなかった。。

カスタム投稿タイプのカテゴリー管理画面のURLを見ると、
example.com/wp-admin/edit-tags.php?taxonomy=plan_taxonomy&post_type=plan
といった形になっているので、taxonomy=XXXXXの部分を参考にした。

条件の切り分け

上記のコードで$is_hoge_taxonomyで切り分けができるようになったので、
下記のようにカテゴリーへの紐付け状態によって条件の切り分けができるようになります。

<?php
if ( $is_hoge_taxonomy ){
//	hoge カテゴリーに紐付いている時の処理
}else{
//	hoge カテゴリーに紐付いていない時の処理
}
?>

【WordPress】Twenty Twelve トップページの一枚目の投稿画像だけを大きくする方法

こんにちは、中村です。WordPressでは色んなテーマが公開されていますね。公開されているお洒落なテーマを見てから自分のブログを見ると、「味気ないな〜」って軽く落ち込みますw「え、こんなにお洒落なのに無料なの?」と驚くほど高機能なテンプレートもたくさんありますが、勉強も兼ねてブログは更新しているのであまり公開されてるテーマにばかり頼りたくない、というなぞの感情を抱いております。

続きを読む

【WordPress/css3】コピペで使えるWebフォント[dashicons]まとめ

WordPressの管理画面で使用されているアイコンの数々、実はこれWEBフォントだって知っていました?意外と言われて気がついた方も多いのではないでしょうか。このアイコンセットは「dashicons」という名前のフォントです。そして実はこれ、ブログ上でも簡単に流用ができます。

続きを読む

Bitnami