【yStandard】当サイトで使用しているショートコード

WordPress無料テーマ「yStandard」で利用できるショートコードを紹介します。
他にもたくさんの機能がありますがココでは当サイトで利用しているものに限ります。

目次

著者情報表示ショートコード

[ys_author default_user_name="user_name"]

自己紹介として使用しています。

・”user_name”の部分は表示させたいユーザーネームに置き換えて利用します。
・ショートコードを実際に使用するときは「 [ 」と「 ] 」は半角にして利用しています。

**実際の表示はココから******

YUSUKEITO

イトウユウスケ[ yusukeito.co

東京 // アラフォー // Wordpress // クレジットカード

View Post


**ココまで************

一部ユーザーを除外したり、一覧表示したりする設定もできるようですが、僕は1つのユーザーを指定するタイプを使用しています。詳しくは公式でご確認ください。

yStandard公式サイト

人気記事ランキング表示ショートコード

[ys_post_ranking mode="slide" post_count="10" thumbnail_size="medium"]

ウィジェットで使用できる「人気記事ランキング」と同じ表示をショートコードを使うことでウィジェット以外でも使用することができます。

・ショートコードを実際に使用するときは「 [ 」と「 ] 」は半角にして利用しています。
僕の使い方

**実際の表示はココから*******


**ココまで*************

コード別の例

それぞれのコードを個別で利用した場合のサンプルを貼っておきますね。

標準

まずはそのまま貼り付けたとき。

[ys_post_ranking]

**実際の表示はココから*******


**ココまで*************

mode=”slide”

スライダーで横にスクロールできるようになります。

[ys_post_ranking mode="slide"]

**実際の表示はココから*******


**ココまで*************

thumbnail_size=”medium”

画像サイズを少し大きくできます。

[ys_post_ranking mode="slide" thumbnail_size="medium"]

**実際の表示はココから*******


**ココまで*************

post_count=”10″

表示させる投稿数を増やせます。

[ys_post_ranking mode="slide" post_count="10" thumbnail_size="medium"]

**実際の表示はココから*******


**ココまで*************

yStandard公式サイト

cssで「READ MORE」を調整

パソコン表示時のホバーアクションとして登場する「READ MORE」です。
ちなみにデフォルトでは「READ MORE」に四角い枠はついていません。
以下を追加しています。

/* READMOREに囲い */
.image-mask__text{	
    text-align: center;
    padding: 0.25em 1em;
    margin: 1.5em 1em 0;
    border: solid 2.5px 
}

まとめ

このようなショートコードをあらかじめ丁寧に用意してもらえていると、細かな設定が大きく省略できて助かります。
慣れてきたらもう少し細かい設定にも挑戦してみたいと思います。