(license)みなさん、こんにちは!タカハシ(@ntakahashi0505)です。WordPressのショートコードを使って、数件の新着記事をアイキャッチ画像つきで表示する機能を実装していきます。投稿や固定ページで動的な処理を実現したいとき、WordPressではショートコードという便利な機能があります。今回はショートコードとは何か、またそれを自作する際に絶対に注意すべき点についてお伝えします。tonari-it.com2016.06.17ショートコードとは何か、そして自作で作る際に気を付けるべきことについてお伝えしています。今回からいよいよ本番ということで、実際にショートコードを作っていきたいと思います。PHPやWordPressの仕組をよく知らない初心者の方でも、一つずつ着実に理解しながら進められるように、できる限り丁寧に解説をしていきますのでご安心下さい。今回は最初ということで、WordPressで最も簡単なショートコードを作ります。簡単なショートコードを作ってみるfunctions.phpを開くfunctions.phpを編集して更新ショートコードを作成するプログラムショートコードタグを追加する関数add_shortcodePHPで関数を書くまとめ連載目次:WordPressのショートコードで新着記事を表示する最も簡単なショートコードを作ってみるでは早速、実際に簡単なショートコードを作ってみましょう。functions.phpを開くWordPressの管理画面からですと、「外観」→「テーマの編集」を開き、右側の「テンプレート」というエリアから「テーマのための関数(functions.php)」というところを選択します。//親skinsを含める場合はtrue、含めない場合はfalse}//子テーマ用のビジュアルエディタースタイルを適用add_editor_style();//以下にSimplicity子テーマ用の関数を書くとありますので、「//以下にSimplicity子テーマ用の関数を書く」というコメントの下に追加したいコードを書いていくことになります。えと、ここで念押しの確認ですが、functions.phpをいじるときは必ず事前にバックアップをとっておいて下さい。したミスで管理画面も含めてサイトが全て真っ白になるときがあります。以下のコードを追加して、画面下部の「ファイルを更新」をクリックしてみて下さい。"テストテストテスト";}add_shortcode('test','shortcode_test');真っ白にならなければおそらく成功です。次にテスト用の固定ページを作成してそのエディタにて[[test]]と入力、プレビューをしてみましょう。プレビュー画面はと「テストテストテスト」と出力されました。これで最も簡単なショートコードの作成が成功、ということになります。ショートコードを作成するプログラムではここから実際に書いたプログラムがどういった内容なのかを解説していきますね。上記プログラムはPHPというプログラム言語で書かれています。それにプラスしてWordPressで用意してされている専用の関数などがありますのでPHPの書き方WordPressで用意されている関数などの両方をマスターしていくことになります。ショートコードタグを追加する関数add_shortcodeまず8行目のadd_shortcodeはショートコードタグを追加する関数です。これはWordPressで用意された関数です。);と書きまして、それぞれのパラメータは$tag:ショートコードにする文字列$func:ショートコードが出現した場所で呼び出す関数を指定します。今回の場合は[test]というショートコードを投稿ページや固定ページに記述したら、shortcode_test()という関数を呼び出して、その結果を表示しなさいということになるわけですね。処理}というように、functionの後に関数名を入れて波括弧で囲みます。今回のプログラムでは2~6行目となりますが、shortcode_testは単純に「テストテストテスト」という文字列が返すだけの関数です。それがそのままadd_shortcodeの二つ目の引数として入る形になります。結果として、投稿ページや固定ページに記述されたショートコード[test]の代わりに「テストテストテスト」が表示されるということになりますね。まとめWordPressで最も簡単なショートコードの作り方を解説しました。PHPの第一歩である関数の書き方とreturn文について、さらにWordPressの関数add_shortcodeについてお伝えしました。次回はもう少しだけ発展をさせまして、ショートコード内で引数を指定する方法についてお伝えしたいと思います。WordPressで引数ありのショートコードを作成する方法をとっても丁寧に説明しますWordPressで引数を指定したショートコードの作り方、またshortcode_atts関数を使って引数が省略されている場合のデフォルト値を指定する方法についてお伝えしていきます。tonari-it.com2016.06.26どうぞお楽しみに!連載目次:WordPressのショートコードで新着記事を表示する初心者でもWordPressショートコードを自作することを目標にして、数件の新着記事をアイキャッチ画像つきで表示する機能を題材として連載形式でショートコードの作り方をお伝えしていきます。プランノーツ代表、コミュニティ「ノンプロ研」主宰。ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ★フォロー頂ければ嬉しいです。「コミュニティ+講座」形式で継続性&教え合える環境も提供。!ノンプログラマーがプログラミングスキルを身に着ける支援ををするコミュニティ。セミナー・もくもく会・Facebookグループのサポートで「自らで学び続ける力をつける」支援、「教え合うことで学びの価値を上げる」場の提供をしています。関連記事WordPress・ブログWordPressのショートコードで記事の抜粋・リンクつきの投稿の作成者も表示するWordPressのショートコードで、数件の新着記事をサムネイル画像つきで表示する機能の実装を進めています。今回は、投稿記事の抜粋そしてリンク付きの投稿の作成者も追加で表示してみたいと思います。2016.08.10PC全般・WindowsVirturalBox&VagrantでローカルPC内に仮想開発環境を構築する本番環境と簡単に同期できるWordPress用ローカル環境を作る第一歩としてWindowsにPC仮想化ソフトVirturalBoxと、環境構築を簡単にするツールVagrantをインストールしていきます。AppsGoogleAnalyticsアドオンを活用して自動で低品質コンテンツをあぶり出すブログの低品質コンテンツを常に自動であぶり出すシステムを作る手始めとして、GoogleAnalyticsアドオンで各記事の検索流入数と滞在時間を自動で出力する方法についてお伝えしていきます。2016.01.15Excel・VBA活用術エクセルVBAでWordPress投稿用HTMLソースを自動で生成するWordPressサイトのソースをエクセルVBAで自動生成する方法についてのシリーズ。初回の今回ですが、エクセルの入力情報をもとにシングルページの1つのセクションについて自動でコード生成をする方法です。PositionWordPressサイトでログイン時に表示される黒い帯の管理バーをブラウザの下に移動してくれるお手軽プラグインをご紹介。↓」で上下に移動も可能です!テーマカスタマイズをされる方にオススメ!サイトメニューと管理バーがカブって困っている方にはCSSによる解決方法も。2016.03.28WordPress・ブログWordPressで作る企業サイト(3)テーマのインストールと設定の仕方Wordpressで企業WEBサイトを作るシリーズの第3回目です。今回の記事では、テンプレートキングのテーマについてインストールの方法とテーマのカスタマイザーの設定について解説をしていきます。こちらのブログを参考にショートコードを作ってみました。一つだけ問題があってどこでショートコードを使っても必ず、ブログ記事本文の1番上にショートコードの内容が表示されてしまいます。[shortcode]はじめまして[shortcode]と入力しても、shortcodeの内容shortcodeの内容こんにちははじめましてとなってしまうのです。これはどのように解決したらいいのでしょうか?ちなみにshortcodeでは、get_template_urlを使って、テンプレートを呼び出しています。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。「コミュニティ+講座」形式で継続性&教え合える環境も提供。詳細・お申込はこちら隣ITを応援する当ブログを「応援したい!」「役に立ったよ!」というお気持ちを、コチラからお支払いただくことができます。日々更新の活力倍増いたします。※PayPalアカウントが必要です。※金額は変更可能です。Platform23HTML・CSS32iPhone・アプリ29Monaca・スマホアプリ開発7PC全般・Windows86PowerPoint・VBA28Python87RPA1VBScript15Vue.js・JavaScript13WEBサービス・クラウド68WordPress・ブログ88Word・VBA42コミュニティ・イベント109セミナーのお知らせ11チャットワーク72データ分析・アクセス解析40仕事・生産性・働き方73動画配信8商業出版21起業・フリーランス72電子書籍・Kindle3運営会社プランノーツは"IT×働き方改革"をお手伝いする会社です。Scriptが「V8ランタイム」をサポート!モダンなECMAScript構文が使えるようになった2020.02.072020.02.08GASでコピーしたGoogleスライドのプレゼンテーションを取得する方法2020.02.052020.02.05Facebookページいつも隣にitのお仕事タイトルとURLをコピーしました。