Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜

皆さまこんにちは!厳しい残暑の候、いかがお過ごしですか?
本日は前回の続き、Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜をお送りします。

〜その壱〜を読んでからでないと何のこっちゃ?だと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ
前回の記事はこちらです。

さて、前回の設定だけでうまくいった方もいらっしゃるかも知れません。しかし私はこの後、投稿した画像が重なって表示されてしまうという現象に悩まされました(笑)
そこで今回は、画像をきちんと読み込んでから表示させるような設定を追加します。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その弐〜” の続きを読む

Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜

インターネッツの皆様こんにちは!
各地で猛暑記録更新ですね〜(++); こう毎日毎日暑いと、もはや出掛ける気力も無いのでブログが捗ります(笑)

本日は、ワードプレスでピンタレスト風レイアウトに挑戦してみよう!の巻です。

ちょっと間が空いてしまいましたが、前回の記事「ワードプレスプラグインCustom Post Type UIの使い方」の続きになります。こちらを読んでからの方がより分かりやすいと思いますので、ぜひ目を通してみてくださいませ(^^)ゞ

さて、前回はカスタム投稿タイプでgalleryという投稿ページを新たに作ってみましたが、今回はそれをJSライブラリ「Masonry」を使って、コンテンツをレンガ状に並べて表示させてみようと思います。
masonryって石工[れんが工]職、石[れんが]造りの建造物、石造建築っていう意味なんですね。
“Masonry.jsを使ってワードプレスにピンタレスト風レイアウトを実装してみよう〜その壱〜” の続きを読む

Jetpackのタイルギャラリーで画像をタイル風に並べてみよう

インターネッツのみなさまこんにちは!
本日はワードプレスの人気プラグイン、Jetpackのタイルギャラリーを使ってみた感じをレポートいたします(^^)ノ

Jetpackとは、30種類以上の機能を備えたプラグインです。これひとつ入れておけば大体のことは出来てしまうのでは?というくらい多機能ですのでよかったらお試しください。
“Jetpackのタイルギャラリーで画像をタイル風に並べてみよう” の続きを読む

ワードプレスのカスタム投稿プラグイン、Custom Post Type UIの使い方

全国のワードプレスラバーの皆さま、こんにちは(^^)/
今回はワードプレスに簡単にカスタム投稿ページを作成できるプラグイン、Custom Post Type UIの使い方です。

目次
1.カスタム投稿タイプとは?
2.プラグイン Custom Post Type UI をインストール〜設定
3.新しい投稿タイプのための固定ページを作る
4.Galleryの中にタクソノミー(分類)を作る
5.メニューに表示させる

“ワードプレスのカスタム投稿プラグイン、Custom Post Type UIの使い方” の続きを読む

ワードプレスとツイッターを連携させる

大変お久しぶりになってしまいました(^^;。
今日はワードプレスとツイッターを連携させてみよう、の巻です。

目次
1.WP to Twitterをインストールする
2.Twitter側の設定をする
3.Twitterからキーを取得する
4.ワードプレス側の設定をする

なぜワードプレスとツイッターを連携させるのか?
以前の記事、ワードプレスにいいね!ボタンを設定してみようでも触れましたが、
ツイッターと連携させるメリットを挙げてみますと、
“ワードプレスとツイッターを連携させる” の続きを読む

ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する

本日は最近良く見かける、ページをスクロールしてもソーシャルボタンがそれに合わせてついて来てくれる、
share barというプラグインを装備してみようと思います。
固定型と比べますと、ソーシャルメディアからのアクセス流入数が10%改善されたという報告もあるそうですよ。

目次
1.Sharebarをインストールする
2.Sharebarに「はてなブックマーク」ボタンを追加する
3.Sharebarのカスタマイズ
4.Sharebarとワードプレス関数 get_excerpt の干渉?によるバグの消し方

1.Sharebarをインストールする

ダッシュボードからプラグイン>新規追加で検索フォームにSharebarと入れて検索します。
最初の方に出てきますので、インストールし有効化します。
“ワードプレスにソーシャルボタンプラグインSharebar(シェアバー)を設定する” の続きを読む

ワードプレスに外部ファイルを読み込ませる

明けましておめでとうございます!

一年の計は元旦にあり!今年はもっと更新頻度を上げて行く様、頑張ります☆

さて、本日はワードプレスに外部ファイルを読み込ませる方法についてです。
ワードプレスで外部ファイルを読み込ませるのには、ワードプレス用のphp関数である、wp_enqueue_script を使います。
今回は、指定したテキストを縦書きにすることが出来る、『竹取』というjsファイルとcssファイルをこのブログの本文に対して指定してみようという試みです。

1.縦書きにするためのファイル、『竹取』をダウンロード

『竹取』から、taketori_js.zipをダウンロードします。これを解凍しますと、中に taketori.js と taketori.css というファイルが入っています。

2.外部ファイルをセッティングする

次に、ご自分のFTPへアクセスします。
私の場合は現在子テーマを使っていますので、そのフォルダの中へ1.でダウンロードした taketori.js と taketori.css を入れます。そうでない方はご自分で使用しているテーマのフォルダの中にこの二つのファイルを入れて下さい。

3.自分用の設定を書くためのjsファイルを作る

二つのファイルを入れたテーマのフォルダの中に、新たに自分用の設定を書くためのjsファイルを作ります。名前は何でも良いです。拡張子は.js です。
(ちなみに子テーマを使用している方は、親テーマのheader.phpファイルを丸ごとコピーして、これを子header.phpファイルとしてテーマのフォルダの中に入れておくと良いです。設定はこちらに記述していきます。間違えても安心ですね。)
“ワードプレスに外部ファイルを読み込ませる” の続きを読む

ワードプレスでソーシャルブックマークボタンを設置してみよう

ワードプレスでTwitterやFacebookなどのソーシャルブックマークボタンを設置する

TwitterやFacebook、Google+1…等々、ソーシャルメディアは欠かせない昨今。
せっかく自分のサイトを作ったのですから、さっそくソーシャルブックマークボタンを設置してみましょう!

ソーシャルブックマークボタンを設置する意味

 

    • ボタンをサイトに設置することで、訪問者があなたのサイトを簡単にブックマークへ追加することが出来ます=「リピーター」になってくれる可能性が高くなります。
    • ソーシャルメディアに登録されることで、検索エンジンにひっかかりやすくなるなどのメリットがあります。よって、他のユーザーからのアクセスアップも見込めます。
    • ユーザーの反応を数値で把握できるので、どんな記事をUPするとアクセスが伸びるのか?なんて解析も出来ますね。

さて。こんなにステキなソーシャルブックマークボタン、このプラグインを使えばあなたのWordPressのサイトにも簡単に一括配置することができるんです!

“ワードプレスでソーシャルブックマークボタンを設置してみよう” の続きを読む

MAMPを設定してみる

mamp

web上に公開する前にローカル環境であれこれテスト出来れば、失敗を恐れずにあれこれ試せるし便利ですよね。プラグインやテーマも使い勝手を試してからインストール出来ますし。そんなローカルのテスト環境を作ってくれるのがmamp(mac),xampp(win)です。

これはうちにもぜひとも設置しておきたい!と、早速MAMPをインストールしてみました。
※ちなみに、MAMPとは「Macintosh+Apache+MySQL+PHP」の略です。

1.MAMPをインストールする

MAMP&MAMP PROへ
mamp

Mac OS X 10.6.6、OS X 10.7 Lionをお使いの方はここからインストール。
それ以前のMac OS X 10.4〜をお使いの方はメニューバーにある「downloads」をクリック→「MAMP & MAMP PRO 1.9.6.1」のバージョンをどうぞ。
クリックしたら、ファイルを保存でダウンロードが始まります。
インストールが終わったら、「使用許諾契約」から「続ける」をクリック。
PCのApplicationsに「MAMP」をドラッグして追加。(※「MAMP PRO」は有料版です。)

2.MAMPを起動する

MAMPを起動させると自動でApacheサーバとMySQLサーバが立ち上がります。
状態が緑になっていればOKです!
mamp-1a

3.環境設定を変更する

それでは「環境設定」をクリックし、設定を変更していきましょう。

★「起動・停止」をクリック
MAMPを起動するたびにスタートページが開いてしまわないよう、「起動時にスタートページを表示」のチェックを外しておきます。
mamp-2

★「ポート」をクリック
ここで、マルチサイト化をしている方、する予定の方はポート番号を変更しておきます!
(※マルチサイト化しない場合は必要ありません。)

デフォルトのApacheのポート番号「8888」→「80」に変更し、「ApacheとMySQLの標準ポートに設定」をクリックします。
mamp-3

すると、後に使うアドレスに変化が起きます。
「http://localhost:8888/wordpress/」(デフォルト)となるところが、
「http://localhost/wordpress/」となります。

4.データベースの設定をする

“MAMPを設定してみる” の続きを読む

スタイルシートに子テーマを設定する

皆さまこんにちは!
wordpressはデフォルトのTwenty Elevenのままでもとっても素敵ですが、他にもたくさんあるテーマの中から気に入ったデザインを選んで着せ替えることが出来るのが魅力ですよね!また、気に入ったレイアウトのテーマを選んで、自分好みにカスタマイズ出来るところも魅力です。本日はwordpressのカスタマイズに必須な子テーマについてのお話です。

1. ワードプレスのテーマを変更してみる

ダッシュボード→外観→テーマ→新規追加

“スタイルシートに子テーマを設定する” の続きを読む