ショートコードを追加🎯
ショートコードって何？🤔
ショートコードは、WordPressでよく使われる便利な機能です。
ショートコードを使うことで、複雑なコードを書くことなく、簡単にコンテンツを追加できます！
例えば、ギャラリーやフォーム、動画など、特定の機能をページや投稿の中に埋め込むことができるんです📲
どうやってショートコードを追加するの？
ショートコードを作るには、functions.phpにコードを追加します。
以下のようなシンプルなショートコードの例を見てみましょう！
function custom_shortcode($atts) {
return '<p>これはカスタムショートコードで表示されたテキストです！</p>';
}
add_shortcode('custom_code', 'custom_shortcode');
これで何ができるの？
上記コードをfunctions.phpに追加すると、
サイトのどこにでもこのショートコードを使えるようになります💡
投稿やページ内で、このように書くだけで—
csharpコピーする編集する[custom_code]
結果
これはカスタムショートコードで表示されたテキストです！
という内容が自動的に表示されます🎉
ショートコードは繰り返し使えるので、何度でも便利に同じテキストやコードを使いたいときに便利です✨
ショートコードを使った実際の例📦
では、もっと実践的な例を見てみましょう！
1. 画像を簡単に表示するショートコード
ショートコードを使って、特定の画像を埋め込むことができます。
function custom_image_shortcode($atts) {
$atts = shortcode_atts(
array(
'src' => 'https://example.com/default-image.jpg', // デフォルト画像
'alt' => 'デフォルトの画像説明文',
),
$atts,
'image_shortcode'
);
return '<img src="' . esc_url($atts['src']) . '" alt="' . esc_attr($atts['alt']) . '" />';
}
add_shortcode('image_shortcode', 'custom_image_shortcode');
これを追加すると、投稿やページ内で以下のように書くだけで—
[image_shortcode src="https://example.com/my-image.jpg" alt="私のオリジナル画像"]
結果
画像が埋め込まれます📸✨
2. ボタンを表示するショートコード
ボタンを作成するショートコードも簡単に追加できます！
function custom_button_shortcode($atts) {
$atts = shortcode_atts(
array(
'text' => 'クリックしてね',
'url' => '#',
),
$atts,
'button_shortcode'
);
return '<a href="' . esc_url($atts['url']) . '" class="button">' . esc_html($atts['text']) . '</a>';
}
add_shortcode('button_shortcode', 'custom_button_shortcode');
これを追加すると、次のように使えます—
[button_shortcode text="詳細はこちら" url="https://example.com"]
結果
サイト上に**「詳細はこちら」**というボタンが表示され、クリックすると指定したURL（例: https://example.com）に飛ぶことができます🎯
ショートコードの活用方法📈
ショートコードを使うことで、記事やページに機能を埋め込む作業が格段に簡単になります。
例えば：
- ギャラリーを表示したい
- お問い合わせフォームを追加したい
- 動画を埋め込みたい
など、1行のコードで実現可能です！
ショートコードはWordPressサイトのカスタマイズを加速させる魔法のような存在です✨
まとめ：
- ショートコードは、特定の機能を簡単にページや投稿に埋め込むための便利な方法です。
- **[custom_code]**のように、1行のコードを記述することで、繰り返し使えるコンテンツや機能を表示できます。
- 自分のサイトにあったショートコードを作成することで、作業が効率化され、サイトの管理が楽になります。
これで、ショートコードの使い方とカスタマイズ例がわかりやすくなったと思います😊
ぜひ、自分だけのショートコードを作って、もっと便利なサイトにしていきましょう！
✉️ あなたのリクエスト教えてください！
「この記事わかりやすかった！」
「他にもこんな記事書いてほしい！」
そんな声を、ぜひXのDMで教えてください！😊📩
できるだけリクエストにお応えして、今後の記事作成に活かしていきます！
▶️ Xもフォローしてもらえるとめちゃくちゃ嬉しいです！
コメントを残す