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

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

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

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

[ryus_blogcard url=”https://usortblog.com//bpinstall/”]
[ryus_blogcard url=”https://usortblog.com//bpuser/”]
[ryus_blogcard url=”https://usortblog.com//bpgroup/”]
[ryus_blogcard url=”https://usortblog.com//bpimageup/”]

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

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

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　というファイルを作って、

/*
Theme Name: BuddyPress Default Child
Template: bp-default
*/

@import url('../bp-default/style.css');

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

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

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

背景の色を変えてみる

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

#header {
    background: #dd1fb3; /* Old browsers */
    background: -moz-linear-gradient(top, #1fb3dd 0%, #1fb3dd 15%, #394c79 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1fb3dd), color-stop(15%,#1fb3dd), color-stop(100%,#394c79)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #dd1fb3 0%,#dd1fb3 15%,#79394c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* IE10+ */
    background: linear-gradient(top, #1fb3dd 0%,#1fb3dd 15%,#394c79 100%); /* W3C */
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    color: #fff;
    height: auto;
    margin-bottom: 20px;
    padding-top: 25px;
    position: relative;
    z-index: 1000;
}

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

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

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

ロゴを画像にしてみる

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

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

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

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

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

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

                    <h1 id="logo" role="banner"><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr_x( 'Home', 'Home page banner link title', 'buddypress' ); ?>"><?php bp_site_name(); ?></a></h1>

というところを、

<h1 id="logo" role="banner"><a href="<?php echo home_url(); ?>" title="<?php echo esc_attr_x( 'Home', 'Home page banner link title', 'buddypress' ); ?>"><img src="http://wordpress44/wp-content/uploads/2016/03/logo.png" alt="<?php bp_site_name(); ?>"></a></h1>

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

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

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

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

[amazon_searchlink search=”WordPress”]