WordPressのショートコードを自作したい!【vol.2】【めもめも】

どうも!すんです。
前回投稿したWordPressのショートコードを自作したい!【vol.1】【めもめも】
の続きになります!

今回はvol.2ということで、前回もちょっと触れた「囲み型ショートコード」の自作方法について、めもしていきたいと思います。

前回のおさらい!囲み型ショートコードとは、

[ショートコード名]...囲まれてしまった。[/ショートコード名]

↑このような形のもの。です。

では!早速!!

囲み型ショートコードの自作方法について!

今回も、function.phpにソースを書き込んでいきます。

例として、囲んだ文字の大きさと、色を変えることができるショートコードを作ってみます。

function 関数名( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('ショートコード名', '関数名');

↑上記の形で、自分でショートコード名と関数名を決め作成すると、
囲んだ文字が青色でフォントサイズが24pxになります。

今回は、spanタグを使用しましたが、もちろんその他のタグを使用してショートコードを作る事もできますよ!

実際に関数名とショートコード名を入れてみると…

function sun( $atts, $content = null ) {
    $val =<<<EOS
       <span style="color:#00f; font-size:24px;">{$content}</span>
EOS;
    return $val;
}
add_shortcode('test2', 'sun');

↑こんなかんじ!

前回の記事同様、
関数名を「sun」に。ショートコード名は「test2」にしてみました。

実際に作ったショートコードを使う時は、

[test2]文字色とサイズを変えたい文字はここに入れてね[/test2]

↑こんなかんじ!

その他にも、

特定のクラス属性を持ったタグで囲みたい!

function content1( $atts, $content = null ) {
    $val =<<<EOS
       <div class="content1">{$content}</div>
EOS;
    return $val;
}
add_shortcode('content1', 'sun');

↑こんなかんじで作ると、

[content1]content1のクラスを持ったdivに囲まれてしまった。[/content1]

content1のクラスを持ったdivタグで囲うことができます。

自己完結型ショートコードに続き囲み型ショートコードの自作方法も紹介してみましたが、
…ショートコードって、便利。ですね。

囲み型ショートコードも応用していけば色々な場面で活躍してくれそうです。

WordPressのショートコードを自作したい!【vol.1】【めもめも】

どうも。すんです。

今回は、WordPressのショートコードの自作方法について!

まず、WordPressで使うショートコードとは。

投稿記事内や特定のテンプレートファイルにて、
テキストやhtml、自作のプログラムなどを挿入することができるものです。

上手く使うと、とっても便利なものです。
作業効率も、ぐーーーーんとアップする!かもしれません。

ではさっそく、ショートコードの自作方法!について

「function.php」に書き込む!

簡単に書くと、こういった感じで記述していきます。

function 関数名() {
    $str =<<<EOS
        表示したい文字列や画像、htmlタグなどなど。をここに記述します
EOS;
    return $str;
}
add_shortcode('ショートコード名', '関数名');

例えば、

function sun() {
    $str =<<<EOS
        酒は飲んでも飲まれるな。
EOS;
    return $str;
}
add_shortcode('test', 'sun');

といった形でfunction.phpに記述した場合、
[test]というショートコードを記事内に書けば

酒は飲んでも飲まれるな。

と、ショートコードを書いた場所に表示されます。

テンプレートファイルに記述する場合は

<?php
echo do_shortcode('[test]');
 ?>

↑こんな感じです。

今回は簡単な文字列が呼び出せるショートコードを例としてあげましたが

たとえば特定の記事を呼び出したりだとか、ブログのタイトルを呼び出したりだとか。
もっと実用的なショートコードをつくることももちろん!可能です。

これはまた次の機会に。

今回めもしたのは、
「自己完結型ショートコード」の自作方法について。

自己完結型ショートコードとは、

[ショートコード名]

↑のようにショートコードひとつ記述するだけで終わり!
っていうもののことをいうみたいです。

その他に、
「囲み型ショートコード」というものもあり、

[ショートコード名]囲まれてしまった。[/ショートコード名]

↑のようなものです。

囲み型ショートコードの自作方法についても、またの機会に
めもしたいと思います。

WordPressでjQueryが動かない場合【めもめも】

どうも。すんです。
今回はWordPressを使う方なら誰でも一度はぶつかるであろう壁、
…というのは少し盛りましたぶつからない方もいらっしゃいますよねもちろん。(弱気)

え、うそ、jQuery動かないんだけど…

という大大大問題の解決方法について、
メモ程度に記しておきたいと思います。

WordPressにjQueryを埋め込む際、
まあ、普通にjsをリンクさせて、コードを埋め込みますよね?

jsファイルをリンクさせる場合は、header.phpに

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>

こんな感じでリンクさせて、

で、↓のようなコードを埋め込みたいとします。

<script type="text/javascript">
			$(document).ready(function() {
				$('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
</script>

こんなんちょろいちょろい

と、毎回埋め込んで動作を確認するんですが、
7割がた上手く動いてくれません。(私調べ)

普通に動いてくれる場合もたまーーーーーーにあるかもしれませんが、
動かない場合は、こう記述してみてください。

	<script type="text/javascript">
			jQuery(document).ready(function() {
				jQuery('#XXX').XXX({
				sectionsColor: ['#fff']
			});
		});
	</script>

「$」を「jQuery」に変えるだけで、あら不思議。

これで大抵動作するようになります。

なぜ「$」だと動いてくれないかというと、
既存のjQueryファイルには、他のjsライブラリファイルとのコンフリクトを回避する設定
「noConflict:function(X)」が記述されています。
この設定が邪魔をして、「$」では動作しないようになっているようです。

「$」を「jQuery」にしても動かない場合は、
WordPress本体がすでにjQueryを読み込んでくれているのに、
自分で本体を追加で読み込ませてしまっていて動かない〜〜ということもあるので、
確認してみましょう。

<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.X.2'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.X.1/jquery.min.js"></script>

新しい本体の後に、古いバージョンのやつ読み込んじゃってるよー、
なんてことも時々あります。

それでも動かないんだけど!!!!という場合は、
……ググりましょう。

こうやってちゃんと書いておけば、
もう同じ失敗は繰り返さないよね!……きっと!!

(私もそろそろ学習します)

超高性能スライダープラグイン【Slider Revolution】

どうも!すんです。

さて、今回はプラグインの紹介です。
超高性能で優秀なスライダープラグイン
【Slider Revolution】について!です。

価格は「$18」。日本円でだいたい2,100円ちょっと。(2014年11月20日現在)
販売元は「codecanyon」です。

購入について。↓
image1
http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380?ref=wdlny

まずは上記URLにアクセス!販売元のページに飛びます。
そして「Purchase(購入)」をクリック!

…そうなんです。もうすでにお気づきだとは思いますが販売元のサイト。全部英語で書かれています。

ということで購入に関しては…
「Google翻訳」に助けてもらってください。(他人任せ)

私は!このプラグインの凄さと使い方について!だけ!ここに記していきたいと思います。

では、機能面の特徴についてまずはざっくりと。

1.レスポンシブ対応のスライダーです!
2.アニメーションの種類がたくさん!
3.直感的な操作で制作可能!スライダーの制作が超簡単!
4.CSSで、スライダーごとに文字や画像の装飾が可能!

めちゃくちゃざっくり、ピックアップして書き出してみましたがどうでしょう。
とりあえず、超簡単に超高性能なスライダーがつくれる超すごいプラグイン!!!
だということはお分かりいただけたかと思います。

確実に価格以上の仕事をしてくれるプラグインだと、実際に使ってみて私は思いました。

Slider Revolutionの設定画面はこちら!↓
image2

主に使うのはこれ!
「Create New Slider」…新しいスライダーを作成します。何個でも作れますよ!
「Setting」…スライダー全体の設定を行います。
「Edit Slides」…スライダーの中の1枚1枚の画像の追加や編集を行います。

もちろんここも英語。です。

ですがみなさん安心してください!このスライダー、だいたい初期設定のままで
全然問題なく、高機能なスライダーが制作できます。

…私にも作れたので、大丈夫ですよ皆さん。

【1.レスポンシブ対応のスライダーです!】

ここからは機能面の特徴について詳しく!使い方含め紹介していきます。

レスポンシブ対応のスライダー。これはかなり嬉しい機能ですね。
最近はサイトを作る上でもうレスポンシブは必須!!そんな時代です。

では、スライダーを作成してみましょう。
「Create New Slider」をクリック!

image4

まず、スライダーの名前をつけます。
今回は「slider2」とつけて作成してみましょう。

「Slider Title」に「slider2」と入力。その下の
「Slider Alias」にも同じように「slider2」と入力します。

そしてそして「Slider Layout」部分。
はじめから「Auto Responsive」にチェックが入っていますね!!!
オートレスポンシブ。初期設定のまま、いじらずにレスポンシブ対応のスライダーになっちゃうんです。

なので、スライダーの名前をつけるだけ。

名前を付けたら、画面下部の「Create Slider」をクリック!
これでレスポンシブ対応のスライダーの土台が完成しました。

【2.アニメーションの種類がたくさん!】

次は、スライダーの編集をしていきましょう。
スライドさせる画像の設定、アニメーションの設定、文字の装飾を行います。

image5

↑作ったスライダー「slider2」の「Edit Slides」をクリックします。

image6

↑すると、このような画面が。
まだスライダーの中身のスライドが一つもない状態なので、
「New Slide」 をクリックし、新しいスライドを作っていきます。

「New Slide」をクリックするとファイルのアップロード画面に飛ぶので、
スライドさせたい画像を選択し、アップロードしてください。

image7

↑アップロードが完了すると、このようにスライドが生成されます。
複数スライドを作りたい方は、同じ要領でスライドを追加してください。

では、スライドの編集にうつります。「Edit Slide」をクリックします。

image8

な、な、長い…
英語だらけの、というか英語しかない恐ろしいページが現れましたね…

ですが、ここもほとんど初期設定のままで大丈夫!!!いじるところは少しだけです。

アニメーションの設定。やっちゃいましょう!!!

image9

なんと53種類のアニメーションが…!!(数えました)(間違ってたらごめんなさい)
3Dのアニメーションもあるので、皆さん色々試してみてはいかがでしょうか。

ちなみに私のおすすめは、「Random Flat and Premium」です。
色々なアニメーションがランダムで表示されるので、面白いですよー!!!

ちなみにそんなアニメーションがいっぱいのSlider Revolutionのスライダーのデモは、
こちらで見る事が出来ます!(http://themepunch.com/revolution/)

【3.直感的な操作で制作可能!スライダーの制作が超簡単!】

これだけでも、もう十分高性能で超すごいスライダーができてしまうんですが、
スライドに文字とか、載せたいですよね?
さらにはその文字もアニメーションで動かしちゃったりしたいですよね?

ということで次は、
スライドに文字や画像、載せてみましょう。動かしてみましょう。

先ほどのながーーーーい英語だらけの画面の、だいたい中央部分。

image10

このあたりをいじっていきます。

まずは、「Background Position」部分。
この設定は、先ほど設定したスライドの画像の、どの部分を基準にするかという設定です。

「center center」に設定しておくと、画像の中央部分が基準になるので
基本的には「center center」にしておけば間違いないと思います。

そしてそして、

「Add Layer」…スライドにレイヤーを追加します。(文字をのせたい場合はこれ!)
「Add Layer:Image」…画像をのせたい場合はこれ!
「Add Layer:Video」…動画を載せたい場合はこれ!

いやー、動画もスライドに組み込めちゃうんですね…すごい。

今回は、文字について詳しく説明していきます。

「Add Layer」をクリックしてみましょう。

image11

「Caption Text1」という文字が現れました!

この出てきた文字を、のせたい文字に変更してみましょう。
「Slider Revolution」に変更してみます。

そして、「style」部分。ここでは文字のスタイルを変更できます。
このスタイルも種類が豊富!!!ドロップシャドウがついているものや、背景がついているものなど。
もちろん、この「style」の中で自分で色やサイズ、フォントの種類を変えることもできますよー!

今回は、私の独断と偏見で「large_bg_black」を選んでみます!

image12

↑こんな感じになります!

「Align,Position&Styling」部分で、レイヤーの位置を調節することができます。
Offset Xを0に、Offset Yを0にすると、画面中央に配置する事が出来ます。

しかも!!!
このスライダー、配置した文字をドラック&ドロップで、好きな位置に動かす事も
できちゃうんです!!!

直感的な操作で、自由に配置できてしまいます。
なんなんだこのスライダー…凄すぎる…

次は文字のアニメーション!!
これ、初期画面では設定場所が隠れちゃってるんです。

「Layer Animation」、探してクリックしてみてください。
クリックすると、設定場所が表示されます。

image13
↑こんなかんじ!
出てきた時のアニメーションの設定項目で、ここ設定すれば大丈夫!!という項目
「Start Animation」…アニメーションを選んでください。(いっぱいあります)
「Start Easing」…イージングも選べちゃいます。(見本がでてきますよ)
「Start Duration」…アニメーションに使う時間を設定できます。

消える時のアニメーションの設定項目で、ここ設定すれば大丈夫!!という項目
「End Animation」…アニメーションを選んでください。(いっぱいあります)
「End Easing」…イージングも選べちゃいます。(見本がでてきますよ)
「End Duration」…アニメーションに使う時間を設定できます。

アニメーションもイージングも、色々種類があるので
色々試してみると面白いですよー!!

ここまで設定が終わったら、皆さん!忘れずに画面下部の
「Update Slide」押してくださいね!!保存です保存!!

image14

保存しないまま別の画面に移動してしまわないように!!
(私は2、3回やりました)

【4.CSSで、スライダーごとに文字や画像の装飾が可能!】

さて、最後の項目です。
これは少し上級者向け、かもしれません。

レイヤーを追加して文字をスライドにのせ、
スタイルも画面上で変更する事ができましたが、

「スタイルの中に自分好みのやつ、ないんだけど」
「もっと自分が好きなようにしたい!!!」

という方は、この方法をお試しください!!

image15

まず、「Setting」をクリック。

image16

ページのいっちばん下!
「CSS / JavaScript」をクリックすると…

image17

このように、CSSとJavaScriptの追加が可能になります!

スライダーに追加したレイヤー(文字や画像)のclassをうまく利用して、
CSSでカスタマイズしてみてください!

実際にスライダーをWordPressサイトに貼りたいときは、
ショートコードをページに貼るだけ!!!

例えば、今回はスライダーの名前を「slider2」にしましたね。
その場合はショートコードは[slider2]になります。

いかかでしたか?
誤字脱字等、ありましたらぜひ見逃してくださいm(_ _)m

今回紹介したSlider Revolution。
まだまだすばらしい機能が沢山あります。

xmlでインポート / エクスポートできたり、

プラグインのフォルダの「documentation」フォルダの中に
HTML 形式のマニュアル(全て英語)が入っていたり、

先ほどもちょこっとだけ紹介しましたが、スライドに動画を埋め込めたりなどなど。

使いながら「これはやばい…!!!」
っていう機能を見つけたら、また記事にしたいと思います。

コーポレートサイト構築サービスサイト完成!

こんにちは!
あんど+ブログ初登場です。
Facebookでは月曜・水曜を担当しています
「すん」こと、村上と申します。
デザイナー兼プログラマー見習いとして日々奮闘中です。

何故、「すん」なのか。名前にかすりもしていないじゃないか。
…この議題につきましては、また次の機会にでもお話できれば、と思っております。

これからこの「時々WordPress」と、「CS-Cart覚え書き」では
頻繁に登場!する!と思います!宜しくお願いします。

そして今回!この「時々WordPress」、あんど+Blogとしても初の投稿になりましたが
な、なんと。ついに!このサイトが!!完成致しました!!!!

http://www.andplus.jp/
「あんどぷらすコーポレートサイト構築サービスサイト」です!..長い!!タイトル!!
もちろん、この「時々WordPress」で紹介しているくらいなのでWordPressで制作してあります。

PCで見ると…
ap-siteimg
こんな感じ!

iPadで見ると…
ap-site2
こんな感じ!です。

レスポンシブデザインになっていますので、
PCからでもタブレットからでもモバイルでも!問題なく見れるようになっています!

コーポレートサイト、そういえばここ数年リニューアルしていないな…
アクセス数、全然伸びないな…
サイトの更新、もう全然できてないな…

など、お心当たりのある方はぜひ一度
「あんどぷらすコーポレートサイト構築サービスサイト」
のぞいてみてください!

あんどぷらすが、あなたの会社の魅力を最大限に引き出す
効果的で価値のあるサイトに総合プロデュースします!!