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

管理画面のプロフィールで、Sangoの「肩書き」の部分を「出身地」などに変更し、管理画面のプロフィールでいらない部分を消す WordPress BuddyPressカスタマイズメモ

自分が、人の記事に書いたコメントだけをまとめて表示するページを作る

WordPressのSNSプラグイン、BuddyPressを導入しサンゴのテーマで運用する。

肩書き(入力するとプロフィールに表示)という欄があるのだが、これを出身地にしてみる。

地域コミュニティSNSなので。
 

functions.php へ記述

・管理画面のプロフィールで、sangoによる追加項目を一旦削除

で紹介した通り、子テーマ → 親テーマ の順で functions.php が適用されるので、まずsangoによる追加項目を一旦削除してからの追加とすること。

//プロフィールの肩書の部分を出身地に変更

function yuya_add_profile($user_contactmethods)
{
 return array(
 'yourtitle' => '出身地',
 'twitter' => 'TwitterのURL',
 'facebook' => 'FacebookのURL',
 'instagram' => 'InstagramのURL',
 'feedly' => 'FeedlyのURL',
 'youtube' => 'YouTubeのURL',
 'line' => 'LINEのURL',
 );
}
add_filter('user_contactmethods', 'yuya_add_profile');

 

ついでに

管理画面のプロフィールでいらないものを消す方法

//管理画面のプロフィールでいらない部分を消す

function user_profile_hide_style() {
  echo '<style>
  #your-profile .user-rich-editing-wrap, /* ビジュアルエディター */
  #your-profile .user-comment-shortcuts-wrap, /* キーボードショートカット */
  #your-profile .show-admin-bar, /* ツールバー */
  #your-profile .user-first-name-wrap, /* 名 */
  #your-profile .user-last-name-wrap, /* 姓 */
  //#your-profile .user-profile-picture, /* プロフィール写真 */
  #your-profile .user-sessions-wrap /* セッション */ {
    display: none;
  }
  </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'user_profile_hide_style');

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

//#your-profile .user-profile-picture, /* プロフィール写真 */

の//を消しておく。

この記事も読まれています

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加 WordPress BuddyPressカスタマイズメモ

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加

WordPressのテーマ、SANGOのビジュアルエディター(スマホ版)の「スタイル」で文字修飾が使えないバグを修正する方法は紹介した。

スマホでやると、入れ子構造が表示できず、全く使えないので、入れ子構造をやめた。

入れ子をやめると文字修飾の数が少なくなってしまうので、フォントサイズだけ別で追加する。
 

functions.php へ記述

フォントサイズなど、一部のプルダウンメニューは、TinyMCEとは別に、追加する。
//新たなプルダウン追加(フォントサイズ)

if ( !function_exists( 'add_ilc_mce_buttons_to_bar' ) ):
function add_yuya_mce_buttons($buttons){
  array_push($buttons, 'backcolor', 'fontsizeselect', 'cleanup');
  return $buttons;
}
endif;
add_filter('mce_buttons', 'add_yuya_mce_buttons');
}

sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾が変) WordPress BuddyPressカスタマイズメモ

サンゴのテーマのビジュアルエディターで、スマホの「スタイル」のバグを修正する

WordPressのテーマ、SANGOのビジュアルエディター(スマホ版)の「スタイル」で文字修飾が使えないバグを修正する。

PCでやると、入れ子構造になって、色々な文字修飾が選べて便利。

スマホでやると、入れ子構造が表示できず、全く使えない。


 

諸悪の根源、問題の箇所

サンゴのビジュアルエディター文字修飾は、

themes/sango-theme/library/functions/style-shortcode.php の中の

add_filter('widget_text', 'do_shortcode' );
function sng_editor_setting($init) {
 //ビジュアルエディターの選択肢からh1見出しを削除(h1は記事本文では使用しない)
 $init['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Preformatted=pre';
 $style_formats = array(
 array(
 'title' => '画像のスタイル',
 'items' => array(
  array(
  'title' => '画像を小さく',
  'selector' => 'img',
  'classes' => 'img_so_small'
  ),...以下略

という記述のファンクションで規定されている。

これを自分の子テーマの functions.php で上書きする。
 

functions.php へ記述

サンゴのバグだと書いたが、実は問題は入れ子構造にある。

スマホでは、TinyMCEの入れ子構造の選択ができない。

スマホの時は、これを上書きして入れ子構造をなくす以外に方法はない。

if ( wp_is_mobile() ) { // スマホ(タッチパネルデバイスのタブレット含む)の時だけ
function yuya_style_init( $init ) {
	$style_formats_headlines = array(
      array(
        'title' => 'Q&Aの「Q」',
        'block' => 'p',
        'classes' => 'hh hhq',
      ),
      array(
        'title' => 'Q&Aの「A」',
        'block' => 'p',
        'classes' => 'hh hha',
      ),
      array(
        'title' => '見出し1:下線',
        'block' => 'p',
        'classes' => 'hh hh1',
      ),
      array(
        'title' => '見出し32:フラット塗りつぶし',
        'block' => 'p',
        'classes' => 'hh hh32',
      ),
      array(
        'title' => '見出し33:角丸ぬりつぶし',
        'block' => 'p',
        'classes' => 'hh hh33',
      ),
      array(
        'title' => '見出し34:肉球',
        'block' => 'p',
        'classes' => 'hh hh34',
      ),
      array(
        'title' => '見出し35:リボン(1行のみ)',
        'block' => 'p',
        'classes' => 'hh hh35',
      ),
      array(
        'title' => '見出し36:片側リボン(1行のみ)',
        'block' => 'p',
        'classes' => 'hh hh36',
      ),array(
        'title' => '1.黒の囲み線',
        'block' => 'div',
        'classes' => 'sng-box box1',
        'wrapper' => true,
      ),
      array(
        'title' => '2.グレイの囲み線',
        'block' => 'div',
        'classes' => 'sng-box box2',
        'wrapper' => true,
      ),
      array(
        'title' => '3.薄い水色の背景',
        'block' => 'div',
        'classes' => 'sng-box box3',
        'wrapper' => true,
      ),
      array(
        'title' => '4.薄い水色+上下線',
        'block' => 'div',
        'classes' => 'sng-box box4',
        'wrapper' => true,
      ),
      array(
        'title' => '5.二重線囲み',
        'block' => 'div',
        'classes' => 'sng-box box5',
        'wrapper' => true,
      ),
      array(
        'title' => '6.青の点線囲み',
        'block' => 'div',
        'classes' => 'sng-box box6',
        'wrapper' => true,
      ),
      array(
        'title' => '7.背景グレイ+両端二重線',
        'block' => 'div',
        'classes' => 'sng-box box7',
        'wrapper' => true,
      ),
      array(
        'title' => '8.橙色の背景+左線',
        'block' => 'div',
        'classes' => 'sng-box box8',
        'wrapper' => true,
      ),
      array(
        'title' => '9.赤の背景+上線',
        'block' => 'div',
        'classes' => 'sng-box box9',
        'wrapper' => true,
      ),
      array(
        'title' => '10.ミントカラー+上線',
        'block' => 'div',
        'classes' => 'sng-box box10',
        'wrapper' => true,
      ),array(
        'title' => '11.影+ネイビー上線',
        'block' => 'div',
        'classes' => 'sng-box box11',
        'wrapper' => true,
      ),
      array(
        'title' => '12.水色立体',
        'block' => 'div',
        'classes' => 'sng-box box12',
        'wrapper' => true,
      ),
      array(
        'title' => '13.青の立体',
        'block' => 'div',
        'classes' => 'sng-box box13',
        'wrapper' => true,
      ),
      array(
        'title' => '14.水色ステッチ',
        'block' => 'div',
        'classes' => 'sng-box box14',
        'wrapper' => true,
      ),
      array(
        'title' => '15.ピンクステッチ',
        'block' => 'div',
        'classes' => 'sng-box box15',
        'wrapper' => true,
      ),
      array(
        'title' => '16.水色ストライプ',
        'block' => 'div',
        'classes' => 'sng-box box16',
        'wrapper' => true,
      ),
      array(
        'title' => '17.シャープ型',
        'block' => 'div',
        'classes' => 'sng-box box17',
        'wrapper' => true,
      ),
      array(
        'title' => '18.左上と右下くるん',
        'block' => 'div',
        'classes' => 'sng-box box18',
        'wrapper' => true,
      ),
      array(
        'title' => '19.カギカッコ',
        'block' => 'div',
        'classes' => 'sng-box box19',
        'wrapper' => true,
      ),
      array(
        'title' => '20.両端ドット点線囲み',
        'block' => 'div',
        'classes' => 'sng-box box20',
        'wrapper' => true,
      ),
      array(
        'title' => '21.グラデーション',
        'block' => 'div',
        'classes' => 'sng-box box21',
        'wrapper' => true,
      ),
      array(
        'title' => '22.影付き+左に青線',
        'block' => 'div',
        'classes' => 'sng-box box22',
        'wrapper' => true,
      ),
      array(
        'title' => '23.丸い吹き出し',
        'block' => 'div',
        'classes' => 'sng-box box23',
        'wrapper' => true,
      ),
      array(
        'title' => '24.吹き出し水色',
        'block' => 'div',
        'classes' => 'sng-box box24',
        'wrapper' => true,
      ),
      array(
        'title' => '25.右上に折り目',
        'block' => 'div',
        'classes' => 'sng-box box25',
        'wrapper' => true,
      )
    );
 $init['style_formats'] = json_encode($style_formats_headlines);
 return $init;
}
add_filter( 'tiny_mce_before_init', 'yuya_style_init', 30 );

上記は一例で、極端な話、入れ子構造をなくして、全ての文字修飾を表示することもできる。

しかしそうすると、あまりにも長くなるので、よく使う20個ぐらいを選んで並べておいて、他はスマホでは非表示にする方が使いやすいかもしれない。

何を残すかは、

themes/sango-theme/library/functions/style-shortcode.php の中の

function sng_editor_setting($init) {
...以下略

の中から選んで、順にコピペしていけばいい。

管理画面のアドミンバー内の「更新」「ヘルプ」「表示オプション」「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);

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

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