BuddyPressで投稿ボタンや投稿先が隠れるのを修正する方法

どうも!気が付いたら猫背だった@xi10jun1です!

今回はですね、BuddyPressでサイトを作成するときに、投稿ボタンや投稿先の表示が隠れてしまう事象がありましたので、それを直す方法を書いていきたいと思います。

素人でも直せるので、そんなに難しくないですよ!

BuddyPressで投稿ボタンや投稿先が隠れる症状

まずは、このような症状だということを確認します。

以下の画像をご覧ください。

BuddyPress投稿時ボタンが消える修正画像1

これは僕の運営するBuddyPressサイト「トレーダーズカフェCORE」です。

ご覧の通り、今はちゃんと投稿ボタンや投稿先が表示されていますが・・・。

BuddyPress投稿時ボタンが消える修正画像2

このように投稿した直後、投稿ボタンや投稿先が下の方にもぐりこんで消えてしまうんですよー!

これ、スマホでも同じようになります。

今回はこれを直しましょう!

BuddyPressサイトで隠れてしまった投稿ボタンや投稿先を表示させる方法

まずはファイルマネージャー、ローカル環境、なんでもいいので、次のファイルを出してください。

サイトドメイン(/public_html)/wp-content/themes/テーマ/lib/css/bp.css

ファイルが見当たらない場合

一旦、サイトを以下の画像のようにします。

BuddyPress投稿時ボタンが消える修正要素の検証画像

修正箇所付近で右クリックし、要素の検証(クロームの場合)をクリックすると、このような画面になります。

この画像内の右下にあるCSSファイルを見てください。

BuddyPress投稿時ボタンが消える修正要素の検証画像2

見えにくいので拡大しました(;^ω^)

で、カーソルを赤枠の部分に重ねると、修正箇所のCSSファイル名が表示されます。

青枠の部分がそのCSSファイルにある修正箇所のコードです。

ファイルを修正する

そしたら、コードを書き換えます。

該当のファイルから、次の箇所を探してください。

BuddyPress投稿時ボタンが消える修正画像4

ここをこのようにします。

.bp-wrapper #whats-new-options,

.widget #swa-whats-new-options {

overflow: hidden;←visibleにする

float: left;

width: 100%;

margin: 10px 0;←0px 0px 40px 0pxにする
}

BuddyPress投稿時ボタンが消える修正画像5

保存すれば修正完了です。

ただし、marginの部分はスマホとの兼ね合いもあるので、まだ変だな?と思ったときは、各自微調整を行ってください。

まとめ:BuddyPressは難しい!けど奥が深いのだ!

基本的に、修正したい箇所を見つける→そこにカーソルを合わせて右クリック→要素の検証を出す→該当箇所を動かして動きを見る→ファイルを修正する、といった動きで解消できます。

ただ、BuddyPressはある種「気難しい」プラグインです。

プラグイン同士の相性が悪いと、上手く動作してくれません。

そんな例がこちら。

BuddyPressの投稿・お気に入り・フィルター等のエラーを直したい!

もし他にエラーがありましたら、参考にしてみてください。

ちなみに、僕がこの運営サイトで使っているテンプレートは、海外サイト→envatomarket(themeforest)から購入したbuddyというテーマです。

envatoで購入するときはクレジットカードが必要になりますので、お持ちでない方は楽天カードなどでクレジットカードを作成しておきましょう。

なお、アカウントの作成からテンプレートの購入まではこちらでまとめています。

envatoアカウント作成方法(テンプレートの購入方法は旧式です)

envatomarketのアカウント作成・購入方法!BuddyPressのテンプレートは買った方が楽!

テンプレート購入方法(最新版)

envatomarketでワードプレステンプレート「Hey Dude」購入!なぜわざわざ買うの?

あわせてご利用いただければと思います。

スポンサーリンク

いつも「読んだらシェア」を心掛けてくださりありがとうございます!

※はてブを使うとコメントと同時に複数のSNSにシェアできて楽ですよ!

スポンサーリンク