WordpressのPHPバージョンを7.1にアップデートする
WordpressのサーバーのCPU負荷が思ったよりやばそう
アクティブユーザーが40くらいでCPU使用率が20%超えるという非常にまずい展開
負荷が増えてくる頃にはサーバーコストなんて気にならないくらい稼いでるだろうし
サーバーチューニングやりたくないから（データ飛ぶ可能性もあるし）コア数スケールさせていけばいいやと
甘い考えを持っていたけど実際は簡単に限界がきました。
チューニングゼロだと n1-standard-4 のメモリ15GBでこんな弱いの！？
phpのバージョンが5.4だったのでこちらの記事を参考に7.1にアップデートしていく。 php最初から7.1入れろって話です。。
アップデート作業
アップデートというよりインストールし直しです。
レポジトリインストール
sudo yum install -y epel-release sudo rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
全php関連削除
yum list installed | grep php sudo yum remove php-*
新しいphpをインストール
sudo yum install --disablerepo=* --enablerepo=remi,remi-php71 php
新しいphp関連パッケージインストール
sudo yum install --disablerepo=* --enablerepo=remi,remi-php71 php-mysql php-mbstring sudo yum install --disablerepo=* --enablerepo=remi,remi-php71 php-pecl-apc
これで完了。インストールされているphpのパッケージを確認してapache再起動する
yum list installed | grep php sudo service httpd restart
表示確認しても問題なさそうです。 ワードプレスはアップデートなどで再起不能になる話はよく聞くので ビクビクしてましたが、phpアップデートの難易度はそんなに高くないと感じました。 死ぬケースとしては使ってるテーマがphp7で削除された構文や関数を使ってるケースですね。
アクティブユーザー50以上で10%程度なので、負荷は半分以下(1/3程度？)とだいぶ改善されたことがわかります。
大変参考になったSNSシェアボタンのコピペ元
まずphpでボタンを出現させる関数を作る
使ってるテーマの下に sns.php というファイルを作り以下のように実装。
<?php $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()).'｜'.get_bloginfo('name'); ?> <div class="share"> <ul> <!--Facebookボタン--> <li class="facebook"> <a href="//www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"> <i class="fa fa-facebook"></i><span> facebook</span> <?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?> </a> </li> <!--ツイートボタン--> <li class="tweet"> <a href="//twitter.com/intent/tweet?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&tw_p=tweetbutton" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"> <i class="fa fa-twitter"></i><span> tweet</span> <?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?> </a> </li> <!--Google+ボタン--> <li class="googleplus"> <a href="//plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"> <i class="fa fa-google-plus"></i><span> Google+</span> <?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?> </a> </li> <!--はてなボタン--> <li class="hatena"> <a href="//b.hatena.ne.jp/entry/<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;"><i class="fa fa-hatena"></i><span> はてブ</span> <?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a> </li> </ul> </div>
ボタンを出現させたい場所にphp関数書けばボタン出現
<?php get_template_part( 'sns' ); ?>
style.cssに追記してスタイル調整する
使ってるテーマの style.css の一番下に書いた。
.fa-hatena:before { font-family: Verdana; font-weight: bold; content: 'B!'; } .share { margin-top: 40px; margin-bottom: 40px; } .share ul { margin: 0; padding: 0; list-style: none; } .share ul:after { display: block; clear: both; content: ''; } .share li { float: left; width: 25%; margin: 0; margin-top: 15px; } .share li a { font-size: 14px; display: block; padding: 10px; text-align: center; text-decoration: none; color: #fff; } .share li a:hover { opacity: .8; } .share li a:visited { color: #fff; } .tweet a { background-color: #55acee; } .facebook a { background-color: #315096; } .googleplus a { background-color: #dd4b39; } .hatena a { background-color: #008fde; } @media(max-width: 599px) { .share li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3px; } .share li i { font-size: 1.3em; padding-top: 3px; } .share li span { display: none; } }
キャッシュがあるので反映が遅い。
記事の通り表示されました。感謝感謝。
ブログにFacebook いいねボタンをつけよう
いいねボタンかなり簡単だった。
https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP
ここでリンクを入れていいねボタンのコードを生成する
上のStep1のコードはページのどこでもいいので貼る。 多分
に書いておく方が読み込み早いんじゃないだろうか。Step3のコードを表示したい場所に書く。
↓これはただのメモ。 自分は「最新記事」という文字の上に表示したかったのでここに書いた。 ./wp-content/themes/使ってるテーマ/blog-templates/front/front-right-sidebar.php
結構探すの大変
広告を記事中やnextpage直前に貼るなど
記事中貼る場合
記事中にテキストモードで直接広告タグを貼ればそのままjsでレンダリングしてくれる。 簡単。
nextpage（次へボタン）の直前で貼る場合
wp-content/themes/使ってるテーマ/content.php でwp_link_page()を記述して次へボタンを表示しているので
その直前に貼ればいいかと思ったけど、 やってみると直後になってしまう。
<section class="article-body"> <?php the_content(); ?> <タグ> // ← ここに貼れば直前になるだろ <?php wp_link_pages( ~ ) ?> // これが次へボタン
どうやら content.php の中でどう書いても article-body の中にはどうやっても入らないようだ。
ので the_content() というのが記事の中身に見えるので the_content() の中に広告を貼ればいい。
the_content() は wp-includes/post-template.php に書いてある。
the_content() 内で get_the_content() という関数を呼んでいてこれが記事作成の本体だ。
function get_the_content( $more_link_text = null, $strip_teaser = false ) {
$output .= "広告タグ"
return $output
}
return の直前に入れたら求めてた通りに広告表示された。
【Wordpress】<!--nextpage-->記法の次のページへボタンをカスタム
で記事中ページ分割ができます。
【WordPress】投稿記事を複数ページに分割する「<!--nextpage-->記法」の使い方 - ONZE
まずデフォルトが番号になっていたので「次のページへ」「前のページへ」というボタンに変えたかった
この辺の記事が参考になった
記事の分割<!–nextpage–> での表示をカスタマイズ | Yoshihara.LaB
ただ、共通のfunctions.cssを書き換えたくはなかったので別の方法を探したところ直接コンテンツページに書けることがわかった。
sudo vim wp-content/themes/自分のテーマ/content.php
article-bodyの要素の一番下にこれを記述すると次へボタンが現れた。
<section class="article-body">
<?php wp_link_pages( array(
'next_or_number' => 'next',
'before' => '<div class="ex-next-page">',
'after' => '</div>',
) );
?>
</section>
あとでcssで調整するために ex-next-page というclasswをつけておく
「 次のページへ」というボタンは欲しいけど「前のページへ」というボタンが消したかった
wp-includes/post-template.php
これのprevをoutputしてるとこを消すのが一番簡単そう
$output .= $r['before'];
$prev = $page - 1;
if ( $prev > 0 ) {
$link = _wp_link_page( $prev ) . $r['link_before'] . $r['previouspagelink'] . $r['link_after'] . '</a>';
/** This filter is documented in wp-includes/post-template.php */
// 「前のページへ」を消したいのでコメントアウト
ココ！ // $output .= apply_filters( 'wp_link_pages_link', $link, $prev );
}
$next = $page + 1;
if ( $next <= $numpages ) {
if ( $prev ) {
$output .= $r['separator'];
}
$link = _wp_link_page( $next ) . $r['link_before'] . $r['nextpagelink'] . $r['link_after'] . '</a>';
/** This filter is documented in wp-includes/post-template.php */
$output .= apply_filters( 'wp_link_pages_link', $link, $next );
}
$output .= $r['after'];
あとはstyle.cssをいじってボタンにすれば完了
