「WordPress」カテゴリーアーカイブ

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を導入すると不特定多数のメンバーが参加することになる。

管理者以外には、Wordpressのニュース、WordPress イベント、ようこそ画面など(ダッシュボードのメタボックスと呼ぶ)不要なものは全て非表示にしたうえで、独自のメタボックスを追加する方法を紹介。

ちなみに非表示にする方法はこちらを参照:
ダッシュボード画面(管理画面)の「アクティビティ」「クイックドラフト」などを非表示 WordPress BuddyPressカスタマイズメモ
 

独自メタボックス追加したい場合

普通の管理画面は色々と便利なウィンドウがあるが、記事を投稿してもらう人には不要なものばかり。

なので、不要なものを非表示にした上で

オリジナルの「クイックアクセス」というメタボックスを追加してみよう。

 

追加方法と記述のしかた

記述は簡単で、functions.php に下記のように書くだけ。

function my_meta_box(){
 add_meta_box( 'my_meta_box', 'クイックアクセス', 'my_meta_box_in', 'dashboard', 'normal', 'core' );
}
function my_meta_box_in(){
 echo '<a href="https://xxxxxxxx.com/">ホームページを確認</a><br />';
 echo '<a href="https://xxxxxxxx.com/wp-admin/post-new.php">新しく記事を書く</a><br />';
 echo '<a href="https://xxxxxxxx.com/wp-admin/profile.php">個人設定やプロフィールを編集</a><br />';
}
add_action( 'admin_menu', 'my_meta_box' );

‘クイックアクセス’の部分はタイトルなので、好きなタイトルでOK。

今回はリンクを貼り付けただけだが、phpで様々な機能を持たせることができる。

ビジュアルエディター見た目を実際の投稿の色や見た目と揃える方法 WordPress BuddyPressカスタマイズメモ SANGOテンプレート

WordPressのビジュアルエディターで、H2やH3のをつけると、実際のCSSと違うようになるので、それを揃える方法

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが投稿するようになると、投稿画面のビジュアルエディターの見た目と、サイトフロントの見た目を揃えておいた方がいい。

別のCSSを用意してそれをビジュアルエディター用のCSSとして読み込ませる必要がある。
 

投稿画面のプレビュー用の別のCSSを用意する

SANGOのテーマの場合は
library/css/editor-style.css
に投稿画面用のCSSが入っている。

それを子テーマに別のCSSを入れて読み込ませてみる。

//スタイルとビジュアルエディターの見た目を揃える
function correct_visual() {
add_editor_style(get_stylesheet_directory_uri() . '/library/css/editor-style.css');
}
add_action('admin_init', 'correct_visual', 20);
get_stylesheet_directory_uri()

とパスを書いておくことによって、子テーマのURLが取得されるのでこれでOK。

例えば、
「オレンジ見出し」を実際のページで青くした場合、オレンジのプレビューになるのに、実際のページでは青。

editor-style.css の中に

/*オレンジ見出し*/
body#tinymce.wp-editor .hh8 {
  padding: 0.5em;
  color: #494949;
  background: #fffaf4;
  border-left: solid 5px #ffaf58;
}

この color や、background の色を変えればいい。