php /WordPress

Bitnamiで不要なcacheを消す方法

Bitnami LAMP/Wordpress の不要なcacheを消す方法

bitnamiが公開しているapplication、開発環境をカンタンに構築できるので利用されている方も多いと思います。

ただ、環境の設定まではカンタンなのですが、cacheがなかなか消えずアップロードがなかなか反映されずに困った方もいるのではないでしょうか?
このcacheを可能な限り最小化する方法を紹介します。

※この記事では、Google Cloud PlatformのCloudLauncherでデプロイしたBitnami applicaionを元に説明しています。予めご了承ください

Bitnami LAMP/Wordpressでキャッシュができている理由

原因その1Google PageSpeed Moduleが有効化されている

PageSpeed Moduleって?

PageSpeed ModuleはWebサイトのロードタイムを高速化するためのツールです。
PageSpeed Moduleをサーバーにインストールし適切な設定を行うことでWebサイトをほとんど調整することなくHTML,CSS,JS,画像などを自動で最適化してくれます(自動化の度合いにより調整は必要になることがあります)。

【自動化】PageSpeed ModuleでWebサイトのパフォーマンスチューニング #1 インストール編|Developers.IO

原因その2PHP.iniのキャッシュ設定が有効化されている

キャッシュを無効化する方法

まずは、gcloudコマンドでterminalからインスタンスにアクセスします。

$ gcloud compute --project "YOUR PROJECT ID" ssh --zone "YOUR ZONE" "YOUR INSTANS NAME"

Google PageSpeed Module を無効化する

Google PageSpeed Moduleの設定ファイルが保存されているディレクトリに移動します。

$ cd ./stack/apache2/conf

設定ファイルが保存されているディレクトリに移動します。

httpd.confファイルの中で、pagespeed関連のファイルがincludeされているので、
そのファイルの呼び出しをコメントアウトして、PageSpeed Moduleを停止します。

$ vi httpd.conf
Include conf/pagespeed.conf
Include conf/pagespeed_libraries.conf
# Include conf/pagespeed.conf
# Include conf/pagespeed_libraries.conf

保存して、

PHP.iniのキャッシュ設定を無効化する

PHPの設定ファイルが保存されているディレクトリに移動し、php.iniファイルを編集します

$ cd ~/stack/php/etc
$ vi php.ini
opcache.enable=1
opcache.enable_cli=0
; opcache.enable=0
; opcache.enable_cli=0

apacheの再起動を行います。

$ cd /opt/bitnami
$ sudo ./ctlscript.sh restart apache

bitnami wordpressでphpmyadminをブラウザから使えるようにする

bitnami wordpressのデフォルトの設定では、
phpmyadminが既にインストールされているのですが、
ブラウザからphpmyadminを直接利用することができません。

DBを修正したり確認するのに、リモートでブラウザからphpmyadminにアクセスしたい人のために
phpmyadminをブラウザから参照できるように変更する方法を紹介します。

まずは、gcloudコマンドでterminalからインスタンスにアクセスします。

$ gcloud compute --project "YOUR PROJECT ID" ssh --zone "YOUR ZONE" "YOUR INSTANS NAME"

ログインが完了したら、設定ファイルが保存されているディレクトリに移動します。
bitnami wordpressでは、webサーバーでapacheを採用しています。
phpmyadminに関するapacheの設定ファイルは、apps/phpmyadmin/の中に存在するので、下記のコマンドを入力します

$ cd ./apps/phpmyadmin/conf/

httpd-app.conf がphpmyadminに関するapacheの設定ファイルです。
このまま編集してしまうことも可能なのですが、一応バックアップを残しましょう。

$ cp httpd-app.conf  httpd-app.conf.bak

設定ファイルを開きます。

$ vi httpd-app.conf

vimでhttpd-app.confが開かれます。
vimの操作方法は特殊なので、わからない方は、「vim 使い方」などで調べておいてください。

<IfVersion < 2.3 >
Order allow,deny
Allow from 127.0.0.1
Satisfy all
</IfVersion>
<IfVersion >= 2.3>
Require local
</IfVersion>

デフォルトの設定では、ローカルのアドレスからしか表示を受け付けない設定になっています。
これを下記のように書き換えて、ローカル以外のアクセスを許可します

<IfVersion < 2.3 >
Order allow,deny
Allow from all
Satisfy all
</IfVersion>
<IfVersion >= 2.3>
Require all granted
</IfVersion>

設定ファイルの保存が完了したら、apacheの再起動を行います。
apacheの再起動には、bitnamiのフォルダにスクリプトが用意されているので、こちらを実行します。

$ cd /opt/bitnami
$ sudo ./ctlscript.sh restart apache

これで完了です。ブラウザからアクセスができるようになっていることが確認できるかと思います。

【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