★GABAMAN★ブログ

技術的なメモ

WordpressのPHPバージョンを7.1にアップデートする

WordpressのサーバーのCPU負荷が思ったよりやばそう

アクティブユーザーが40くらいでCPU使用率が20%超えるという非常にまずい展開 f:id:nyanchu-01:20180224024048p:plain

負荷が増えてくる頃にはサーバーコストなんて気にならないくらい稼いでるだろうし サーバーチューニングやりたくないから(データ飛ぶ可能性もあるし)コア数スケールさせていけばいいやと 甘い考えを持っていたけど実際は簡単に限界がきました。 チューニングゼロだと n1-standard-4 のメモリ15GBでこんな弱いの!?

phpのバージョンが5.4だったのでこちらの記事を参考に7.1にアップデートしていく。 php最初から7.1入れろって話です。。

qiita.com

アップデート作業

アップデートというよりインストールし直しです。

レポジトリインストール

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で削除された構文や関数を使ってるケースですね。

f:id:nyanchu-01:20180224124143p:plain

アクティブユーザー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;
}
}

キャッシュがあるので反映が遅い。

記事の通り表示されました。感謝感謝。

f:id:nyanchu-01:20180204205143p:plain

ブログにFacebook いいねボタンをつけよう

いいねボタンかなり簡単だった。

https://developers.facebook.com/docs/plugins/like-button?locale=ja_JP

ここでリンクを入れていいねボタンのコードを生成する

f:id:nyanchu-01:20180126025154p:plain

上の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

まずデフォルトが番号になっていたので「次のページへ」「前のページへ」というボタンに変えたかった

f:id:nyanchu-01:20180119004722p:plain
この辺の記事が参考になった
記事の分割<!–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>

f:id:nyanchu-01:20180119004747p:plain
あとで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'];

f:id:nyanchu-01:20180119004838p:plain

あとはstyle.cssをいじってボタンにすれば完了

githubのレポジトリをcloneしようとしたらPermission Deniedが出た

ずっと前にハマったけど新しいPCで仕事をし始めたタイミングでまたハマったので一応メモ

 

### ただssh-addしましょうって話です。

ssh-keygen -C "login@foobar.com" -t rsa

のようにメールアドレスと登録すればいいのは知らなかった。

理由は知らない。

 

qiita.com

【作業記録】ドメイン取得とDNS設定

サイトのタイトル決めてドメインを取得。

お名前.comで取得した。

サーバーがGCPなのでGCPの画面から「ネットワークサービス > Cloud DNS」に移動してゾーンとレコードセットを追加します。

ネームサーバーのドメインが取得できるので、お名前.comにログインして取得したドメインのネームサーバー設定でGCPのネームサーバーを入れる。

www.compiere-distribution-lab.net