「サンゴ」タグアーカイブ

SANGOで、投稿のカテゴリーを複数登録し、ちゃんと複数カテゴリー表示させる方法 WordPress BuddyPressカスタマイズメモ

WordPressのサンゴテンプレートで記事投稿のカテゴリーを複数選択しても、1個しか表示されない件

サンゴのテンプレートでカテゴリーを複数個選択しても…

左上のオレンジの楕円の部分がカテゴリ名だが、
↓こんな感じで、1個目のカテゴリーしか投稿記事の画面では表示されない

これを、↓こんな風に、ちゃんと複数個表示させる。


 

functions.phpへの記述

色々な記述方法が考えらえるが、元々のSANGOの記述をできるだけ踏襲する形で書く。

//カテゴリーを記事一覧に複数表示
function output_catogry_link() {
 $cat = get_the_category();
 if (!$cat) {
  return false;
 }
 if ($cat) {
 $i = 0;
 foreach( $cat as $category) {
 $catId = $category->cat_ID;
 $catName = esc_attr($category->cat_name);
 $catLink = esc_url(get_category_link($catId));
 if ($catLink && $catName) {
  echo '<a class="dfont cat-name catid' . $catId . ' cat-multi' . $i . '" href="' . $catLink . '">' . $catName . '</a>' ;
  }
  $i = $i + 1;
  if ( $i >= 8 ) {
   break;
  }
  }//foreach
 }//if($cat)
 }

カテゴリーがある分だけ取得して、ソースとして吐き出されるので、ソースはこんな感じ。

<a class="dfont cat-name catidXX1 cat-mult0" href="カテゴリー1へのリンクURL">1のカテゴリー名</a>
<a class="dfont cat-name catidXX5 cat-mult1" href="カテゴリー5へのリンクURL">5のカテゴリー名</a>
<a class="dfont cat-name catidXX6 cat-mult2" href="カテゴリー6へのリンクURL">6のカテゴリー名</a>
...

classにclass に “cat-multi$i” ($iは変数でカテゴリのー数0から数字が順番に入る)

cat-multi数字 にCSSで配置を指定してやればいい。

なお、スペースの関係上、今回は上限を8個としている。
 

CSS (管理画面→外観→CSS編集→追加CSS)への記述

.cat-multi0{
 top: 3px !important;
}
.cat-multi1{
 top: 27px !important;
}
.cat-multi2{
 top: 51px !important;
}
.cat-multi3{
 top: 75px !important;
}
.cat-multi4{
 top: 99px !important;
}
.cat-multi5{
 top: 123px !important;
}
.cat-multi6{
 top: 147px !important;
}
.cat-multi7{
 top: 171px !important;
}

で、こんな風になる。

今回は上から下に並べているが、色を変えたり、横にずらしたりと色々できるはず。

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

トラックバック、ピンバック、コメントの通知メール内容を変更 WordPress BuddyPressカスタマイズメモ

トラックバック、ピンバック、コメントの通知メール内容を変更

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

コメントがついた時に、投稿者にコメントが来たという通知メールが届く。

そこにIPアドレスが表示されたり、著者のURLや、コメントを書いた人のメールアドレスが表示される。

投稿者にIPメールアドレスなどは知らせる必要はないのでこれを削除したい。

ということで、メールの内容変更する。
 

functions.php へ記述

そこにIPアドレスが表示されたり、著者のURLや、コメントを書いた人のメールアドレスが表示される。

投稿者にIPメールアドレスなどは知らせる必要はないのでこれを削除したい。

// トラックバック、ピンバック、コメントの通知メールの内容を変更する

function custom_comment_moderation_text( $notify_message, $comment_id ) {
 global $wpdb;
 $comment = get_comment($comment_id);
 $post = get_post($comment->comment_post_ID);
 $comment_author_domain = @gethostbyaddr($comment->comment_author_IP);
 $comments_waiting = $wpdb->get_var("SELECT count(comment_ID) FROM $wpdb->comments WHERE comment_approved = '0'");
 $blogname = wp_specialchars_decode(get_option('blogname'), ENT_QUOTES);
 $comment_content = wp_specialchars_decode( $comment->comment_content );
 switch ( $comment->comment_type ) {
  case 'trackback': // トラックバック
  $notify_message = "「{$post->post_title}」に新しいトラックバックがありました。\r\n";
  $notify_message .= get_permalink($comment->comment_post_ID) . "\r\n\r\n";
  $notify_message .= "\r\n";
  $notify_message .= "トラックバック元: {$comment->comment_author}\r\n";
  //$notify_message .= "IP: {$comment->comment_author_IP} ({$comment_author_domain})\r\n";
  //$notify_message .= "URL: {$comment->comment_author_url}\r\n";
  $notify_message .= "トラックバックの概要: \r\n";
  $notify_message .= "{$comment_content}\r\n";
  $notify_message .= "\r\n";
  break;
 case 'pingback': // ピンバック
  $notify_message = "「{$post->post_title}」に新しいピンバックがありました。\r\n";
  $notify_message .= get_permalink($comment->comment_post_ID) . "\r\n\r\n";
  $notify_message .= "\r\n";
  $notify_message .= "ピンバック元: {$comment->comment_author}\r\n";
  //$notify_message .= "IP: {$comment->comment_author_IP} ({$comment_author_domain})\r\n";
  //$notify_message .= "URL: {$comment->comment_author_url}\r\n";
  $notify_message .= "ピンバックの概要: \r\n";
  $notify_message .= "{$comment_content}\r\n";
  $notify_message .= "\r\n";
  break;
 default: // コメント
  $notify_message = "「{$post->post_title}」に新しいコメントがありました。\r\n";
  $notify_message .= get_permalink($comment->comment_post_ID) . "\r\n\r\n";
  $notify_message .= "\r\n";
  $notify_message .= "投稿者: {$comment->comment_author}\r\n";
  //$notify_message .= "IP: {$comment->comment_author_IP} ({$comment_author_domain})\r\n";
  //$notify_message .= "メールアドレス: {$comment->comment_author_email}\r\n";
  //$notify_message .= "URL: {$comment->comment_author_url}\r\n";
  $notify_message .= "コメント: \r\n";
  $notify_message .= "{$comment_content}\r\n";
  $notify_message .= "\r\n";
  break;
 }
 return $notify_message;
}
add_filter( 'comment_moderation_text', 'custom_comment_moderation_text', 10, 2 );
add_filter( 'comment_notification_text', 'custom_comment_moderation_text', 10, 2 );

これで、コメント承認通知メールと、コメントがつけられた時の通知メールの、内容を変更してIPアドレスなどを表示しないようにする。

しかし、実は、問題があり、
通知メールに「返信」した時には、コメントをくれた人のメールアドレスへの返信となってしまう

メールヘッダーに reply-to 要素に、コメントを書いた人のメールアドレスが入っているからだ。

これを変更するには下記関連記事の、メールに返信した時にコメントを書いた人のメールアドレスが出ないようにする を参照。

関連記事:
・コメント通知メールの差出人(wordpress@yourdomain.com)のメールアドレスを変更

・メールに返信した時にコメントを書いた人のメールアドレスが出ないようにする(Better Notifications for WordPressの設定の問題点を修正するため、管理画面で特定のページの時のみ、jsを上書きする)

Sangoの著者ページ「author/…」でその著者の投稿が無いと、アバターが正しく表示されないバグ修正 WordPress BuddyPressカスタマイズメモ

サンゴのバグ修正、著者ページで投稿がないとアバターやプロフィールが表示されない

そのユーザー(著者)の投稿した記事があれば、記事一覧の上に、アバターの写真とユーザー名、プロフィールの詳細が表示されるが…

投稿した記事がない場合は、アバターもデフォルトのものになるし、プロフィールの詳細が表示されない…


 

修正するファイル

wp-content/themes/sango-theme/parts/archive に入っている

archive-header.php

がこれにあたる。

これを同じ階層で子テーマにコピペで突っ込む。
 

修正する箇所

元の4行目あたり

 <p class="author_page_img">
  <?php
   //著者画像
   $iconimg = get_avatar( get_the_author_meta( 'ID' ), 125 );
   if($iconimg) echo $iconimg;
  ?>
 </p>

 ↓↓↓

 <p class="author_page_img">
   <?php
   //著者画像
   $iconimg = get_avatar( get_the_author_meta('ID',$author) );
   if($iconimg) echo $iconimg;
  ?>
 </p>

get_avatar( get_the_author_meta( ‘ID’ ), 125 );

だと、その記事の著者になってしまうので、

$iconimg = get_avatar( get_the_author_meta(‘ID’,$author) );

として、そのURL author/userID の userID 部分の人のアバターを取得するように変更。

次にプロフィールの詳細の部分で、記事投稿がない場合には、別途プロフィールの詳細を表示させる。(投稿がある場合は、従来のSANGOのテンプレのものがそのまま表示される)

 <h1 class="dfont">
  <?php echo esc_attr(get_the_author_meta('display_name',$author)); ?> <?php fa_tag("check-circle","check-circle",false) ?>
 </h1>
 <?php else : //著者ページ以外?>
 <h1>
  <?php
   if( output_archive_title() ){

 ↓↓↓

 <h1 class="dfont">
  <?php echo esc_attr(get_the_author_meta('display_name',$author)); ?> <?php fa_tag("check-circle","check-circle",false) ?>
 </h1>
 <?php 
  if( !have_posts() ) { //投稿がない場合以下を実行
   echo '<div class="taxonomy-description entry-content">'.strip_tags(get_the_author_meta( 'description', get_the_author_meta('ID',$author) )).'</div>'; // プロフィールの詳細を表示
  }
 ?>
 <?php else : //著者ページ以外?>
  <h1>
   <?php
    if( output_archive_title() ){

これで、記事がなくてもプロフィールアバターとプロフィールの詳細が表示される。

管理画面のプロフィールで、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, /* プロフィール写真 */

の//を消しておく。

管理画面のプロフィールで、子テーマのfunctions.phpでsangoの親テーマによるfunctionsの追加項目を削除する WordPress BuddyPressカスタマイズメモ

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

WordPressの管理画面のプロフィールで、親テーマによって追加される項目を削除したい。

remove_filter('user_contactmethods', 'add_user_contactmethods');

でフィルターフックを削除できるのだが、

functions.phpに記述したものは、子テーマ → 親テーマ の順で適用される。

子テーマでいくら remove_filter しても、親テーマで上書き add_filter されてしまうので、効果がない。

親テーマの後に remove する必要がある。
 

functions.php へ記述

add_action( 'after_setup_theme', '' );

にフックすると、テーマの読み込み後(つまり、親テーマのfunctions.php後)に処理してくれる。

//管理画面のプロフィールのsangoの追加項目を一旦削除

function remove_sango_add_user_contactmethods()
{
 remove_filter('user_contactmethods', 'add_user_contactmethods');
}
add_action( 'after_setup_theme', 'remove_sango_add_user_contactmethods' );

これで、OK

ビジュアルエディターの文字修飾で新たなプルダウン(フォントサイズ)追加 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) {
...以下略

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

メンバーなどWidget/ウィジェットのURLをリダイレクトさせる(テーマはSango) WordPress BuddyPressカスタマイズメモ

メンバーなどWidget/ウィジェットのURLを.htaccessリダイレクトする方法

・BuddyPressのメンバーページはダサすぎるので使わない。

 ↓↓↓
サンゴの著者ページに全てリダイレクトしておく

基本、ウィジェットからのリンクはfunctions.php を使ってURL自体を書き換えるのだが、直接メンバーページのURLを入力されることが無いとは限らない。
(このページ最下部の関連記事参照)

なので、念のため、.htaccess を使って、リダイレクトしておく。

URL書き換えをせずとも、.htaccess リダイレクトだけでも運用的には問題ないが、SEO的にはリダイレクトは少ない方がいい。

あと、マウスホバーで出てくるURLが、memberなのに、行き着く先がauthorになってしまうので、少しかっこ悪い。
 

.htaccess へ記述

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule ^member/(.*)$ author/$1 [R=301,L]
</IfModule>

関連記事:
WordPress のWidget/ウィジェットなどのリンクのURLの文字列を、functions.phpを使って別の文字列に置換する方法 BuddyPress(テーマはSango)カスタマイズメモ

BuddyPress のメンバー登録時の、ユーザー名で使わせない禁止文字列を設定する