カテゴリー別アーカイブ: 投稿のカスタム

文字の色や大きさを変える

何故かワードプレスの場合font sizeのhtmlタグが効きません。cssの記述は効くようですが投稿の度にcssのコードを書くのも面倒なのでプラグイン「TinyMCE Advanced」をインストールしましょう。

「TinyMCE Advanced」の設置

直接コードを書き込みしても出来ますが非効率的ですのでプラグインをインストールします。
ダッシュボード→「プラグイン」→「新規追加」で「TinyMCE Advanced」を検索してインストールします。(詳細は省きます)

投稿記事の文字を修正タイプの作成

ダッシュボードメニュー「投稿」→「新規追加」で早速試してみましょう。
「ビジュアル」のタグに文字の大きさや色、フォント変更できるメニューバーが追加されます。
(「テキスト」タグには追加されません)
160

かんぱに☆ガールズ オンラインゲーム

パンくずリストを表示する

固定ページにパンくずリストを表示させる事は定石になっていますが投稿記事に追加したいという人が少ないかもしれませんが当ホームページでは必要でしたので作ってみました。
プラグインも多数存在しますが結局phpコードを追加する処理が必要になってきますので、phpコード追加のみで表示させることにしました。
プラグインを使用しないメリットはカスタマイズが自由に出来る事と他のプラグインに干渉するリスクが少ないという所です。

「functions.php」にコードを追加する

コードのサンプルはbl6.jpさんのホームページをご参考にさせて頂きました。
以下のコードをfunctions.phpの最終行あたりに追加します。

記事の投稿ページにパンくずリストを追加する

パンくずリストを表示させるにはphpのコードを埋め込みます。

<?php breadcrumb(); ?>

テーマにより修正するファイルが多少異なるとは思いますが、大体のテーマはcontent.phpになります。
カテゴリの表示部分を以下に換えます。

<div class="entry-meta">
     <span class="cat-links"><?php breadcrumb(); // パンくずリスト表示 ?></span>
</div>

記事投稿ページでパンくずリストが表示されます。
054

かんぱに☆ガールズ オンラインゲーム

標準の投稿とは別に新着情報を作る

標準とは別の投稿を作りたい時は、どのような時かといいますと、当サイトでは投稿で記事を作成しております。
こうなるとサイト自体の新着情報を作りたい時にワードプレス講座の投稿とごちゃごちゃになってしまいますので分ける必要性が出てきますので、分けて作成してみました。

「Custom Post Type UI」の設置

直接コードを書き込みしても出来ますが非効率的ですのでプラグインをインストールします。
ダッシュボード→「プラグイン」→「新規追加」で「Custom Post Type UI」を検索してインストールします。(詳細は省きます)

新しい投稿タイプの作成

ダッシュボードメニューに「CPT UI」が追加されますので「CPT UI」→「Add/Edit Post Type」を選択します。
030

例として「新着情報」を追加しますので以下のように入力して登録してみました。
031

ショートコードの作成

固定ページに新着情報を表示させるためにはショートコードが必要ですので以下の手順で作成します。
「function.php」の最下行に以下のコードを追加します。

/* 新着情報出力のショートコード */
function fncOutNews() {
  echo '<div >';
  $posts = get_posts('post_type=news');
  global $post;

  foreach ($posts as $post): setup_postdata($post);
    echo '<h4>' . get_the_date() . '</h4>';
    echo '<h4>' . the_title() . '</h4>';
    echo '<div >' . the_content() . '</div>';
  endforeach;
  echo '</div>';

  return;
}
add_shortcode('post_news', 'fncOutNews');
  • 最終行の「post_news」がショートコードになります。
  • 「fncOutNews」は呼び出される関数名になります。
  • 関数内の「get_posts(‘post_type=news’)」の引数には「新しい投稿タイプの作成」で設定したスラッグ名’news’を入れます。
固定ページにショートコードを埋め込む

あらかじめ新着情報表示用の固定ページを作っておきましょう。
そこの固定ページに[fncOutNews]を埋め込みます。
032

記事の投稿

ダッシュボードの投稿メニューに「新着情報」(⇐例では)が追加されますので既存の投稿と同じ感覚で投稿します。

実際の表示はこんな感じです。
034

かんぱに☆ガールズ オンラインゲーム

ウィジェットに投稿の索引を表示させる

投稿が初期値のままだとカテゴリー別に見たい場合に不便なのでウィジェットにツリー表示したいと思い調べてみましたが、これが調べてすぐ見つかると思ってましたが中々出てきませんでした。
(カテゴリーのみツリー表示させるのはすぐ見つかりましたが)
自分でコードを追加するよりもプラグインを使用したほうが効率的ですので、ここでは「WP-dTree」を紹介します。

「WP-dTree」のインストール

ダッシュボード→「プラグイン」→「新規追加」で「WP-dTree」を検索してインストールします。(詳細は省きます)

ウィジェットの追加

ダッシュボード→「外観」→「ウィジェット」で「WP-dTree Categories」をウィジェットに追加します。
003

ウィジェットの設定

設定項目は以下に記載しますので、任意の設定にして完了です。
004

Title タイトル表示 例)逆引きリファレンス
Cache(recommended!) キャッシュ
“open all”-link 階層ツリーオープンリンクの名前
“close all”-link 階層ツリークローズリンクの名前
Use lines 階層ツリーのライン表示有無
Use icons 階層ツリーのアイコン表示有無
Close same level 一度に1つのツリーノードしかオープンしない
Folders are links フォルダーノードのリンク指定。有効時はそのカテゴリーの投稿記事のサマリー表示
Highlight selection 現在開いている記事のノードをハイライト表示
Open to selection 現在開いている記事のカテゴリーノードをオープン
Truncate titles カテゴリ名/記事名の最大表示文字数(0は制限なし)
Exclude カンマ区切りで階層ツリー表示しないカテゴリーIDを指定
例えば、お知らせカテゴリーを表示させないなら、そのID番号を調べ数値で指定します
Include カンマ区切りで階層ツリー表示するカテゴリーIDを指定
Force open to 階層ツリーで常にノードをオープン表示するIDを指定
全部オープンするときは、all を指定
Order カテゴリーの並び順(昇順/降順)
Sort by カテゴリーの並べ方 name/id/slug/count/group
Sort posts by 記事の並べ方 post_title/post_data/ID
Post order 記事の並び順(昇順/降順)
Limit 最大表示カテゴリー数(0は制限なし)
Limit posts カテゴリ毎の最大表示記事数(0は制限なし)
Show more link  
Show descendands of  
Only *direct* children of  
Exclude posts カンマ区切りで表示しない投稿記事IDを指定
Allow duplicate entries  
Hide empty categories 記事のないカテゴリーの表示有無
List posts 投稿記事のリスト表示の有無
Show post count カテゴリーの投稿記事数表示
Show RSS  
実際の表示はこのような感じ

005

かんぱに☆ガールズ オンラインゲーム

任意の項目出力1(関数一覧)

主な投稿の項目を出力する関数は以下になります。
実際に出力するサンプルコードは「任意の項目出力2(サンプル)」をご参照ください。

記事のID
<?php the_ID(); ?>
記事の日付
<?php the_time('Y年m月d日(D)'); ?>
記事の更新日
<?php the_modified_date('Y年m月d日(D)'); ?>
タイトル
<?php the_title(); ?>
本文
<?php the_content(); ?>
記事本文の文字を制限して表示(100文字で区切って語尾に…を表示)
<?php echo mb_substr($post->post_content,0,100).'...'; ?>
記事のURL(パーマリンク)
<?php echo get_permalink(); ?>
投稿者名
<?php the_author(); ?>
かんぱに☆ガールズ オンラインゲーム

記事の表示順を並び替える

初期値の記事の表示順は日付の新しい順から表示されます。
ただのブログでしたら、それで問題ないと思いますが、当ホームページのように用途に応じた順番に並べ替えたい場合にお勧めなのが、プラグインの「Intuitive Custom Post Order」です。

「Intuitive Custom Post Order」のインストール

ダッシュボード→「プラグイン」→「新規追加」で「Intuitive Custom Post Order」を検索してインストールできますので詳細は省きます。

設定

「設定」→「並び替え設定」より、並べ替えを行う記事を選択します。
ここでは投稿の並び替えの記述ですので「投稿」にチェックを入れ更新します。
「固定ページ」にチェックを入れると固定ページの並び替えも可能です。
001

使い方

投稿一覧で並び替えしたい記事をドラッグアンドドロップで移動するだけです。
002

かんぱに☆ガールズ オンラインゲーム