2016年版 BuddyPressでSNSを作ろう!インストールとデザインの変更

BuddyPressとはWordPressのプラグインで、WordPressを使ってコミュニティサイトを作るものです。グループを作成したり、プライベートメッセージを送受信したりすることもできてちょっとしたFacebook?みたいなものを作ることができます。
昨年、この記事を書いたばかりだったのですがその記事にコメントをいただいたことをきっかけに再度インストールしてみたところ、インストールする手順が変わっていました。それと、テーマのデザインを変更するということもしてみたかったのでそれらについて書きます。

BuddyPreessをインストールして一通り使えるまでの記事

まだ1年たっていませんが、BuddyPressについて4つの記事を書きました

先日八王子でローカルのSNSを作る話がありました。そのときにWordPressのプラグインBuddyPressを使って作ってみました。とりあえずはプラグインのインストールと初期

前回「WordPressでSNSを作ろう!BuddyPressのインストールと初期設定」で、BuddyPressというプラグインを使ってSNSを作り始めました。今回はSNSなの

「WordPressでSNSを作ろう!BuddyPressのインストールと初期設定」と 「WordPressでSNSを作ろう!ユーザー登録できるようにする」で、BuddyPre

WordPressでSNSを作ろう!シリーズも今回で4回目になりました。ほぼだいたいできあがったと思えたWordPressでのSNSなのですが、はっ!と気づいたら画像が投稿でき

この記事の1つめ、「WordPressでSNSを作ろう!BuddyPressのインストールと初期設定」の手順が変わっていました。それ以外についてはざっと確認しましたが、今も使い勝手は変わらないようでした(インストール以降はこの3記事を参考にしてください)。

ということでまずインストールについて書こうと思います。

BuddyPress 2.5.0 をインストールする

ダッシュボード プラグイン>新規追加 をクリック

buddypress と入力してリターン

BuddyPressが見つかりましたので 今すぐインストール をクリック

プラグインを有効化 をクリック

インストールが終わりました。ここで、気がついたのですが何もしなくても日本語化がされていました!それが前回の記事と違うところです。日本語ファイルを持って来て適用するなどの処理がなくなり、ますます使いやすくなっています。

子テーマでデザインを変更する

BuddyPressにはコミュニティで使うのにちょうどいいテーマが入っています。

wp-content\plugins\buddypress\bp-themes

に bp-default というテーマが入っています。このbp-defaultというフォルダを wp-content\themes\ にコピーして、このテーマを有効化すると

コミュニティっぽい雰囲気になりました。

もちろんテーマは好きなものを使うことができますが、bp-themesに比べるとしっくりきませんでした。とはいえ、色とかデザインとか少しぐらいはカスタマイズしたいなぁと思いますので、子テーマで対応してみようかと思います。

bg-defaultの子テーマを作る

wp-content\themes\ に bp-default-child というフォルダを作ります。

そのフォルダに

style.css というファイルを作って、

このように中身を記述して、保存します。

ダッシュボード 外観>テーマ をクリックすると

BuddyPress Default Child というテーマが表示されました。

背景の色を変えてみる

背景の青系のものを赤系にしたかったので色の指定部分を子テーマにコピーして色コードを変えてみます。

このコードを子テーマのstyle.cssに追加します。

子テーマを有効化して、サイトを見てみると

ヘッダ部分が赤系統の色に変わりました。

ロゴを画像にしてみる

ロゴは文字で表示されていますが、これを画像にしてみたいと思います。

ロゴにしたい画像をあらかじめ作って、(背景が透明でわかりにくいですが(^_^;)

メディアからアップロードしておきます。クリックして、

URLをコピーしてメモ帳などのどこかにとっておきます。

ヘッダ部分を変更するには、親テーマのbp-defaultフォルダから header.php というファイルをコピーして、

BuddyPress Default Child に貼り付けます。子テーマのheader.phpを開いて、22行目

というところを、

こんな風に書き換えます。http://wordpress44/wp-content/uploads/2016/03/logo.png というのがコピーしておいた、アップロードしたロゴ画像のURLです。

これで再度表示し直してみると、

ロゴ部分が画像になって表示されました(^^)/

通常のサイトと同じく、デザインを変更したかったらこの子テーマをいろいろ変更していくと良いと思います。

[Amazon sponsored link] WordPress 関連本
兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] 2016年版 BuddyPressでSNSを作ろう!インストールとデザインの変更 […]

トップへ戻る