「テーマ」タグアーカイブ

管理画面のアドミンバー内の「更新」「ヘルプ」「表示オプション」「Wロゴ」などのメニューを非表示 WordPress BuddyPressカスタマイズメモ

管理者以外は、プラグイン、ユーザーなどのサブメニューを非表示にする

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

できるだけシンプルにしたいので、管理画面の上の「更新」「ヘルプ」「表示オプション」「Wのロゴ」などを非表示にする。

remove_menuでPHPの読み込みをさせないようにできる場合は、そちらを優先。

remove_menuが使えない「ヘルプ」や「表示オプション」は、仕方ないのでCSSで非表示にしておく。

 

functions.php へ記述で、PHPを読み込ませない

//管理者以外の管理画面のアドミンバー内のメニュー非表示

if ( ! current_user_can( 'administrator' ) ) {
 function my_remove_adminmenu( $wp_admin_bar ) {
  $wp_admin_bar->remove_node('wp-logo');        //左上の「W」のロゴ
  //$wp_admin_bar->remove_menu( 'site-name' );  // サイト名
  $wp_admin_bar->remove_menu( 'view-site' );    // サイト名 -> サイトを表示
  $wp_admin_bar->remove_menu( 'dashboard' );    // サイト名 -> ダッシュボード (公開側)
  $wp_admin_bar->remove_menu( 'themes' );       // サイト名 -> テーマ (公開側)
  $wp_admin_bar->remove_menu( 'customize' );    // サイト名 -> カスタマイズ (公開側)
  //$wp_admin_bar->remove_menu( 'comments' );   // コメント
  $wp_admin_bar->remove_menu( 'updates' );      // 更新
  $wp_admin_bar->remove_menu( 'view' );         // 投稿を表示
  $wp_admin_bar->remove_menu( 'new-content' );  // 新規
  $wp_admin_bar->remove_menu( 'new-post' );     // 新規 -> 投稿
  $wp_admin_bar->remove_menu( 'new-media' );    // 新規 -> メディア
  $wp_admin_bar->remove_menu( 'new-link' );     // 新規 -> リンク
  $wp_admin_bar->remove_menu( 'new-page' );     // 新規 -> 固定ページ
  $wp_admin_bar->remove_menu( 'new-user' );     // 新規 -> ユーザー
  $wp_admin_bar->remove_menu( 'my-account' );   // マイアカウント
  $wp_admin_bar->remove_menu( 'user-info' );    // マイアカウント -> プロフィール
  $wp_admin_bar->remove_menu( 'edit-profile' ); // マイアカウント -> プロフィール編集
  $wp_admin_bar->remove_menu( 'logout' );       // マイアカウント -> ログアウト
  $wp_admin_bar->remove_menu( 'search' );       // 検索 (公開側)
  $wp_admin_bar->remove_menu( 'bp-notifications' ); // BuddyPressの通知
}
add_action( 'admin_bar_menu', 'my_remove_adminmenu', 1000 );
}

頭に「//」がついている場合は、コメントアウトされて非表示にならないので、上のコードで、例えば「コメント」も非表示にしたい場合は、
頭の

//$wp_admin_bar->remove_menu( 'comments' );

の//を消しておく。
 

functions.php へ記述でCSSで非表示にする。

//cssで、ヘルプや表示オプション、管理画面のフッターなどの不要なモノを見えなくする

if (!current_user_can('administrator')) {
function my_admin_print_styles(){
	echo '<style type="text/css">';
		//投稿のエディタボタン関連
		echo '#contextual-help-link-wrap,';//ヘルプ
		echo '#screen-options-link-wrap,';//表示オプション
		echo '#collapse-menu,';//管理画面のメニューを閉じるボタン
		echo '#wpfooter';//フッター
		echo '{display:none !important;}';
	echo '</style>';
}
add_action('admin_print_styles', 'my_admin_print_styles', 21);
}

“管理者”でもメニューを削除したい場合は、一番上と一番下の

if (!current_user_can('administrator')) {

}

を削除すればいい。

プラグインなどで勝手に追加されるメニューのIDを調べる方法

functions.phpへ

function check_post_label_id() {
    global $wp_admin_bar;
    var_dump($wp_admin_bar);
}
add_action( 'admin_menu', 'check_post_label_id' );

これを書いて、ページ(ソース)を見ると

array(数字) {[0]->string(数字)"メニューの単語"[1]=>string(数字)"スラッグ"......}

って感じの文字の羅列が見えるので、

“メニューの単語” の前にある array(数字)数字が”メニューの単語”のIDになっている。

WordPressの子テーマを最速で適用する手順

WordPressのテーマを子テーマ化する最速の方法

細かい説明一切無しの手順。

1.FTPソフトで子テーマフォルダを作る

 

/wp-content/themes の中に 「テーマ名-ch」と言う名のフォルダを作成する。
ちなみに名前はなんでもいいので、適当でもOK。

child-theme1

 

2.作ったフォルダにcssファイルとfunctions.phpファイルをアップロード

FTPソフトで、今作った子テーマフォルダに、style.cssとfunctions.phpをアップロードする。

style.css
functions.txt
↑「右クリック」 「名前を付けて保存」でダウンロードせよ。

style.cssの中身

/*
Theme Name: Child
Template: twentytwelve
*/

Theme Name: これは適当でいい。
Template: の右の「twentytwelve」と書いてある部分は、親のテーマのフォルダ名なので、違うテンプレートを使っている場合は、(FTPソフトなどを見て)親のテーマのフォルダ名に変更する事。

functions.txt の中身

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

こちらは編集する必要はないので、拡張子の.txtを、.phpに変更し、functions.phpをそのまま子テーマフォルダにアップロード。
 
 

3. 親テーマのカスタマイズしたphpを子テーマフォルダにアップロード

 
例えば、ヘッダーをカスタマイズした場合、親テーマのheader.phpを一旦ダウンロードし、子テーマフォルダにアップしなおす。
 
child-theme2

 
子テーマフォルダ内はfunctions.php、style.css、header.php(などのカスタマイズしたphpファイル)の3つだけ。
 
child-theme3
 
 

4. ワードプレス管理画面から、テーマを子テーマに変更する

 
「外観」→「テーマ」→「Childなどの子テーマの名前を選んで有効化」
 
※ヘッダー画像、jetpackのCSS編集、メニューなど、テーマ由来の設定は一旦初期化される(削除されるわけではない)ので、先にコピペメモをとるなり、覚えておくなりする事。
一般設定、表示設定、パーマリンク設定などは初期化されないのでそのままでOK。
 
 

5. メニューやCSS編集(jetpackプラグイン)などの設定をやりなおす

 
「外観」→「メニュー」→「位置の管理」で、メニューを以前と同じものを選んだり、ヘッダー画像を戻したりすれば、全て元通り。
 
これで、子テーマ適用完了。

twentyfifteenで灰色の線をなくす方法 Wrodpress

Twenty Fifteen シンプルな記事型ブログに最適なテーマ

シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。

 

具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。

 

Twentyfifteenは意外とカスタマイズしにくかった

 

理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
 

twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法

CSSで以下のような記述の部分を探そう。

.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}

.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}

ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。

なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要!

@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}

↑こういう感じのやつ。

 

twentyfifteenで、灰色のborderを非表示に

 
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。

.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}

こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。

これを以下のように、

box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);

すればとりあえず線は消える。

これも、メディアアンカーに注意だ!