【WordPress】追加の機能をプラグインでまとめる話

Web技術

スポンサードリンク

【WordPress】追加の機能をプラグインでまとめる話

2017.08.20

皆様こんにちは、ケートミィ・メディアラボの富田です。
今回はWordPressのプラグインの作成方法について解説してみたいと思います。

WordPressでは機能を追加するとき、functions.phpにコードを書き加えて行くのですが、
子テーマなどを設定していない場合、テーマのアップロードの巻き添えを食う形で消えてしまうと言った悲劇に遭遇することがままあります。

子テーマの設定はSimplicityなどのデフォルトで対応しているテーマなどの場合は良いのですが、
そうでない場合やすでに出来上がってるサイトの場合は少し手間が掛かります。

そう言ったときにfunctions.phpに書き込んでいた機能をプラグイン化させると、それらの悲劇が回避出来ることに気付いたので今回はそのことをシェアしたいと思います。

プラグインの作成方法

WordPressの機能をプラグイン化させるのはある程度Wordpressのfunctions.phpを触った事がある人であれば簡単に作成出来ます。

まずはテキストエディタ等で空のphpファイルを用意して下のコードをそれに書き込みます。

注意点
プラグインの名前、プラグインフォルダの名前、プラグインのPHPファイル名は
一意(ユニーク)で分かりやすい名称に
する必要が有ります。
プラグインのファイルにインクルードされているその他のphpファイルも
現在公開されているプラグインやテンプレートタグの名称と被ってしまうと動作しなくなってしまいます。

その後、従来はfunctions.phpに書き込んでいたコードを追加していくのですが、
その場合は<?php~などphpの始まりのタグから追加して行く必要があります。

例えば、投稿画面のカテゴリ選択のチェックボックスをラジオボタンに変更させる
といった機能ををプラグイン化させる場合は、下記のように記述します。
(saori様サイトより引用:https://memocarilog.info/wordpress/7191

さらにそれを任意の名前のフォルダ内に格納し、FTPなどを使用してWordPressのプラグインフォルダにアップロードします。
実際はフォルダの中に入れなくても問題が無いそうなのですが、今後のことを考えてフォルダの中に格納するのが良さそうですね。
フォルダに格納した際のイメージとしては下記のようになります。
それぞれのファイル名は任意の名前に置き換えてご参考ください…

plugin_file/plugin.php
    |_lib/data.php
    |_images/image.png
    |_style.css   
    |_lang
    readme.text

それぞれの解説としては、

plugin.php
プラグインの本体ファイルになります。
冒頭で解説した開始コードを入れる事により、
Wordpressにこれはプラグインファイルであると認識させることが出来ます。

lib/
プラグインファイルはテーマファイルと同じように
他のphpファイルから機能を読み込むことが出来ます。
この中にプラグインで使用するphpファイルを格納します。

images/
style.css

プラグインに読み込ませる必要があるスタイルシートや画像ファイルは、
こちらに格納します。

lang/
言語ファイル、翻訳ファイルはこちらに格納します。

readme.text
プラグインの解説ですね、敢えて説明するほどで無いかと思います。。

ライセンスについて

もし、貴方がオリジナルなプラグインを作り出し、
公開したいとします。
その際に必要になってくる情報が下記の記述になります。

GPL2のライセンスを有効にする場合は冒頭で書き込んだメタ記述に続いて
下記のタグを追記します。

GPL2WordPressと同じライセンス権限で、誰でもプラグインを自由に使用でき、
再配布や改変をした場合でも同じ条件を継承する
という意味合いを持つそうです。

こちらのタグで書き換える必要のある部分は下記の、

・作成した年
・プラグインの作者名
・作成した人のメールアドレス

これらの3つの項目になります。
それ以外に何かを追記するとライセンスが認識されなくなるので
ご注意下さい(;´∀`)

終わりに

基本的に公式からのコピペでプラグインの認識まで可能になると思うので、
プラグインの開発難しそう…と感じてる方も是非実践してみると良いかもしれません!

以上、ケートミィのブログでした!

コメントを書く







コメント内容


*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

【AWS】アマゾンウェブサービスに登録してみた話【Amazon Web Services】

2017.06.14

皆様こんにちは、ケートミィ・メディアラボの富田です。

今回は今話題のWebサービス、Amazon Web Services(以下AWS)に登録したときの話をしてみたいと思います!

AWSってなんぞ?

Amazon Web Services(アマゾン ウェブ サービス、AWS)とは、Amazon.comにより提供されているクラウドコンピューティングサービス(ウェブサービス)である。これらのサービスは全世界で11の地域に提供されている。AWSの有名なサービスにAmazon Elastic Compute Cloud (EC2) とAmazon Simple Storage Service (S3) がある。これまでのクライアントが保有していた物理的なサーバファームと比較してAWSは大規模な計算処理能力を速やかに、かつ安価に提供出来る。

と、Wikipediaに書かれている文章を引用したのですが、
正直説明読んでも「AWSってクラウドなの?サーバなの?」
と思いました。

こういう場合は自分で試して実感を得るしかないなと言うことで、
早速アカウントを取ってみることにしました。

早速登録してみる

実は僕が登録する前に面食らってたのがこの画面なのですが、
機能が多彩すぎてよく分からないイメージはこのあたりからも来てるのかも…
と思った次第です(*_*;

実際サイト運用する程度であればこの中のAmazon EC2の使い方だけを覚えれば良いみたいなので、
そこまで憶える範囲は多くないとは思います。

ちなみに、AWSは「AWS無料利用枠」と言うものが有って特定のサービスは12ヶ月間無料で使えるようなので
気軽に試せるようですね。

今回はWordpressサイトを立ち上げて独自ドメインを紐付けるところまで進めていこうと思います。

あ、登録はAmazon.co.jpのアカウントでは駄目で、
aws.amazon.comのアカウントが必要なようです。

Amazon EC2でサイトを立ち上げよう

Amazon EC2って何をするものなの?

Amazon EC2はAWSの中にある仮想サーバーのようなもので、
それぞれはインスタンスと呼ばれています。

Amazon EC2を起動してElastic IPを割り当ててみる

その中の「AWS Marketplace」というタブからWordpressというキーワードで検索します。
そこから「無料利用枠の対象」と表示されている「WordPress powered by Bitnami」を選択します。

そこからインスタンスタイプを一覧から選択(ここでは無料利用枠分のt2.microを選択)

確認と作成で次の画面が出てくるので特に問題がなければ起動をクリックしてシステムを起動させます。

その際に以下のダイアログボックスが出てきますが、
ここはキーペア無しで続行、「この AMI に組み込まれたパスワードがわからないと、このインスタンスに接続できないことを認識しています。」をチェックして次に進めばよいかと思われます。

インスタンス一覧に先程追加してたものが表示されていれば完了です。

ただ、ここに表示されているパブリックIPなどは変動することもあるので、
Elastic IPというメニューから新しい固定アドレスを割り当てる必要があります。

※ここでつまづいた箇所が一つあるのですが、
管理画面の右上にこのように横に並んでいるメニューがあると思います。

その中に地名を選択できる物があるのですが、このことを「リージョン」と呼ぶそうです。
いつの間にかリージョンが切り替わっていたことが有って一覧に作成インスタンスが表示されなかったことがあるので、「あれ?インスタンス(またはElastic IP)作成したのに一覧に出てこない…」と言った事にリージョンを疑ってみると良いかと思われます😃

その後、Elastic IPの管理画面からアドレスの関連付けをして
固定IPの割当ては完了です。


IPアドレスをブラウザのアドレス欄に入力するとトップページが出てきます。
IPアドレス+/wp-loginでログイン画面に入れます。

ちなみに、初期ログインIDはuserで共通しているようです。
パスワードはインスタンスを右クリックで「インスタンスの設定>システムログの取得」から開くダイアログボックスのこのあたりから取得できます。

独自ドメインの割当について

AWSはレジストラ(ドメイン取得業者みたいなもの)としての機能を持っておらず、
他のドメイン管理会社から取得する必要があります。

ここではまずお名前.comからドメインを取得したとして話を勧めていきたいと思います。

ドメイン取得後、左上メニューのサービス一覧から「Route 53」と検索します。

画面左のメニューから「Hosted zones」を検索し、「Create Hosted Zone」をクリック。

正常に追加されると下記のようにDNSレコードが表示されます。

続いて、レジストラ側の設定に移る前に追加した独自ドメインと
Elastic IPを紐付けます。

「Create Record Set」でDNSレコードを追加します。
Nameにはwwwを入力します。
TTLは適宜変更する必要はありますが、新規に立ち上げる際は300で良いかと思われます。

続いて、ドメイン管理会社側の設定ですが、AWSで取得したNSレコードを4つともドメイン管理会社側のDNSレコード設定に
追加していきます。

最後にAレコードを追加して、
しばらく時間を置いた後アドレス欄にURLを打ち込んで
正常にトップページが表示されれば完成です。

まとめ

基本的にDNSレコード周りは他のサーバー会社と変わらないと思いますので、
そこまで身構える必要は無さそうですね。

AWSに関してはまだわからないことが多いので、これから研究する必要がありそうです。

以上、ケートミィのブログでした!

コメントを書く







コメント内容


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

httpsにしてみた

2017.05.11

皆様こんにちは
ケートミィ・メディアラボの富田です。

Google Chromeが2017年からSSL対応されていないページでは
パスワード入力時やクレカ情報入力時に警告表示するようになったそうです。

その流れを受け、私のサイトもhttpsに変更致しました!

現在の本サイトはwpXというWordpress専用のレンタルサーバーで動いているのですが、以前はさくらインターネットを使用しておりました。

さくらは料金は手頃で良かったのですが、Wordpressの挙動が重く、https化に費用が掛かるのでもっと良いレンタルサーバーは無いか探していた所、ある方から「wpXおすすめ」と伺ったのでものは試しと契約してみました。

サイトをhttps化する

ここではwpXでサイトをSSL化する方法を説明します。
説明と言っても管理画面をちょこっといじるだけなので、すぐに終わります。

①各ドメインのサーバー管理画面に入ります。

②セキュリティ設定の独自SSL設定をクリック
(設定がOFFの場合はONにする)

③お好みに応じて各項目をチェック!

まとめ

wpXだとたったこれだけでサイトをhttps化出来ちゃいます!
ただ、外部のサービスでGoogle Search Console等を使用されている場合は新たにドメインを追加する必要があります。

httpsに強いWordpressサーバーをお探しなら打ってつけなサービスだと思うので、お悩みの際はぜひご検討ください….



なんだかサーバーの宣伝みたいになってしまいましたが、
以上、ケートミィのブログでした!

コメントを書く







コメント内容


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

【Git】GitHubでよく使っているコマンドの紹介

2017.04.06

皆様こんばんは
ケートミィ・メディアラボの富田です。

私はWordpressメインの案件を承ることが多いのですが、
ダイレクトなコーディングになるとWordpressは上書き形式なので
過去バージョンの扱いについて問題が発生することがあります。

そのため、現在はフロントエンドのバージョン管理に
GitHubを使用しております。

というわけで今回は、私がよく使用しているコマンドの紹介をしようと思います。
※多分、ごく初歩的な内容止まりなので知っている人にとってはあくびが出るような内容だと思います。。

[注意]GitHubは無料版は公開リポジトリしか無いので、
自分のプロジェクトが公開されるのに問題がある場合は有料版にするか、
Bitbacketというサービスを使用するのが良いかと思われます。

インストール

GitHubのアカウント持ってるだけじゃローカルからpush(データのアップロード)出来ないんですね(*_*;

下記のURLからGitというソフトをインストールする必要があるらしいです。

https://git-scm.com/download/win

作成前の準備

作業ファイルに移動して。。

上記のコマンドでGitの初期化をします、gitという隠しファイルが作られます。

例「 https://github.com/ユーザー名/リポジトリ名.git」

更新/作業が終わったら

上記のコマンドでファイルを追加します、この段階ではまだリモートリポジトリの方には
ファイルはアップロードされておりません。

ファイルをコミットします。
どう言えば良いんでしょうか。。
追加して、承認すると言ったニュアンスだと思います(;´∀`)

リモートリポジトリのmasterにファイルをアップロードします。
masterというのが大元のバージョンになるそうです。

gitの現状を表示します。
追加されていないファイルや、現在はどのbranch(後述)なのか等が表示されます。

GitHubは複数のメンバーで作業するために、
ファイルのバージョンをいくつも枝分かれさせる機能があります。
上記のコマンドは現在どの枝なのか表示させるものです、
初期状態はmasterになっている思います。

新しい枝(branch)を増やす場合は下記のようにコマンド入力します。

下記のコマンドでブランチを移動します。

これ以外にもgit margeなどの重要なコマンドがあるのですが、
そちらの方はあまり使っていないのでちょっと情報不足な感じです。

またこんな方法があるよ!というのが有りましたらぜひご教授願えればと…

以上、ケートミィのブログでした。
また何か有りましたら続きを書こうと思います。

コメントを書く







コメント内容


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

CSSアニメーションについて(その2)

2016.07.08

こんばんは、
富田です。

前回のエントリーに引き続き、CSSアニメーションについて研究を進めて参りたいと思います。

前回、CSSアニメーションはtransitionとanimationの2種類のプロパティのうち、animationのみの解説をしていたと思うので、今回は残るtransitionについて記事を書いてみたいと思います。

※今回のサンプルデータは下記URLから確認できます。
https://k-103i.com/anime/button-transition/index.html

this

transformプロパティの4つの値(transrate、scale,rotate,skew)と、box-shadowを使ってそれぞれtransitionを有効にした場合のサンプルを用意致しました。

以下にサンプルで使用したコードを書き出しております。

HTML

 

スタイルシート

transitionについて

transitionには(transition-property、transition-duration、transition-timing-function、transiton-delay)の全部で4つのプロパティをショートハンドで記述することが出来ます。

例えば、下記のように記述可能です。

それぞれ空白をおいて記述してあり、並び順が重要になってきます。
記述しない場合は初期値が反映される形になっております。
初期値はそれぞれtransition-propertyがnone、transition-durationが0、transition-timing-functionがease、transiton-delayが0です。

transition-propertyには変更させたいプロパティ名をカンマ分けで記述できます。
それ以外の値だと、noneとallが使用可能で、今回はallを多用致しました。
allだと、trannsitionが適用可能な全てのプロパティが変化します。

transition-durationはtransition(変化)にかかる秒数を指定でき、デフォルトは0(アニメーションさせずにすぐに変化する)ので~sなどの値で秒数を指定します。

transition-timing-functionは変化のタイミングの指定のことで、簡単に言えば動きの緩急のつき具合を調整するものです。

基本的な概念はベジエ曲線(cubic-bezier(数値,数値,数値,数値))で表現する形になっておりますが、プロパティとしてはease、linear、ease-in、ease-out、ease-in-outの5つの値で簡単に表現できるようになっております。
それぞれのcubic-bazierで記述した場合の値は以下のようになっております。

  • ease・・・            cubic-bazier(0.25,0.1,0.25,1.0)
  • linear・・・         cubic-bazier(0,0,1.0,1.0)同等
  • ease-in・・・       cubic-bazier(0.42,0,1.0,1.0)同等
  • ease-out・・・     cubic-bazier(0,0,0.58,1.0)同等
  • ease-in-out・・・cubic-bazier(0.42,0,0.58,1.0)同等

Illutrator等でベジエ曲線を編集された方であれば経験があるとは思われますが、cubic-bazierのそれぞれの座標はこのようにイメージできます。

cubic-bazier-01

この中の1,4は固定なので、4つの値の中には2と3の値をそれぞれ(x2,y2,x3,y3)と記述します。

transitionプロパティはブラウザーによってはベンダープレフィクスで記述する必要がありますが、従来ではJqueryなどを使用する必要のあったなめらかなアニメーションをCSSのみで実装できるので、使い勝手は良いのではないかと思います。

コメントを書く







コメント内容


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

CSSアニメーションについて

2016.07.01

こんばんは、
ケートミィ・メディアラボの富田です。

ここ最近CSSアニメーションを使用する案件がいくつか入ってきたので、これを機に少し研究してみようと思いました。

CSS3になってから、従来はJavascriptやFLASHなどを使って表現していた動的な処理がスタイルシートのみで表現できるようになりました。

CSS3でのアニメーション表現にはtransitionとanimationという2つの役割の違うプロパティがあるのですが、それぞれ作動する(発火する?)条件が異なっています。

  • transition・・・マウスオーバーやクリックなどのユーザーのアクションで動くアニメーション、
    スムーズにリストが開いたり、動的なメニューでよく使われています。
  • animation・・・ブラウザが開いた時に自動的に再生が始まるアニメーション、
    再生回数の指定や、アニメーションを別に設定してキーフレームの指定が可能です。

animationプロパティはわかりやすく言えば、transitionが多機能になったものと考えて頂ければ良いかと思いますが、同一のセレクタに両方を設定してしまわないように注意は必要になりそうです。

今回はテストとしてanimationプロパティを使用した下記のようなCSSアニメーションを作成してみました。

css3-ss

矩形がズームを繰り返すシンプルな構造のものですが、使用したパーツはすべてCSSを使用しています。

HTML

スタイルシート

次に上記コードのポイントを解説してみます。

ポイント1

animationのプロパティの値は順番でanimation-name、animation-duration、animation-timing-function、animation-deray、animation-iteration-count、animation-directionをスペース区切りで記述できます。
例えば、animation-nameにanimeを設定した5秒の1回切りで再生終了する2000ミリ秒ディレイの掛かったアニメーションプロパティを作成する場合は以下のようになります。

animation-name→animation-duration→animation-deray→animation-iteration-countの順に読み込まれているのがわかると思います。

初期値は1回のみですが上記のように指定すると無限に再生することが可能になります。

残るはanimation-timing-function、animation-directionという値ですがこれはそれぞれアニメーションのイーズのかかり方を調整するものと、アニメーションの再生/逆再生を制御する値になっているそうです。イーズのかかり方に関しては数多くの値があるようなので詳しく調べて見る必要がありそうです。

ここまで来て気になるのがanimation-nameとはなんぞや、ということなんですが、実はanimationプロパティはキーフレームの設定を@keyframesという処理で別枠で記述する形式になっています。

ポイント2

ページが読み込まれる際に、animationプロパティに記述したanimation-nameと同一名のkeyframesが読み込まれます。
@keyframessの後に空白を置いて固有の名前を、大括弧の中にアニメーションさせる対象のプロパティを記述します。

@keyframes以下の大括弧内に記述したプロパティなのですが、キーフレームをfromからtoまでをパーセンテージで記述する形式になっています。

最も少ないキーフレームではfrom(0%)、to(100%)の2キーのみで使用することが可能です。

その間の1~99%までを任意の区切りではさむことが出来ますが、アニメーションの始め(0%かfrom)と終わり(100%かto)のいずれかでも記述されていないものはエラーと見なされるようです。
アニメーション出来ないプロパティについては記述しても無視されますが、keyframesはほとんどのプロパティに適用させることが出来るようです。

また、上記のように途中のキーフレームに書き込まないプロパティがある場合は、その部分が自動的にモーション補完されます。

以上のように色々な使い道が想像できるプロパティですが、ブラウザによっては対応していない場合があるので、ベンダープレフィックス等注意が必要になるかも知れません。

 

今回テストで用意したテストページは以下のURLから確認出来ますので、
是非ご参考ください。

https://k-103i.com/anime/endless-loop1/index.html

コメントを書く







コメント内容


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Advertisement