.post_excerpt { display: block; width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

テーマ

「Wordpressのショートコードが便利!基本の作り方」という記事で、ショートコードの追加の方法をご紹介通り、Wordpressでは、簡単に自分でショートコードを追加することができます。今回は、このショートコードの具体的な使い方についてご紹介します。 WordPressの投稿画面の「メディアの追加」から画像を追加してもいいのですが、すでにあるhtmlをワードプレスの記事にするときに、画像をテンプレートファイルにFTPでアップロードして、URLをテキストエディターなどの一括置換機能を使ってURLをショートコードを使ったURLに書き換えると、スピーディに記事を追加することができます。 また、テスト用のサイトから本番用に移行する予定があるときも、テンプレート用フォルダの同じ階層に画像をアップすれば、記事内のURLを書き換える必要がないので、画像URLをショートコードを使って作成しておくと、移行時に手間を減らすことができます。 テンプレート内の画像を使った記事の投稿の方法 テンプレートで使われている会社ロゴなど、テーマディレクトリに保存されている画像を記事の投稿で使いたい場合に便利なショートコードをご紹介します。 function内でWordpressの関数である「get_template_directory_uri」を使うことで、有効化されているテンプレートディレクトリのURIを取得することができます。 function shortcode_tp( $atts, $content = '' ) { return get_template_directory_uri().$content; } add_shortcode( 'tp',...

プラグインを使っていると、投稿記事の中に[〇〇]のように[]で囲ったテキストを入力して、問い合わせフォームなどを追加するということがあります。この[]で囲ったテキストはショートコードといいます。 このショートコードを使うと、テンプレートで使っているテンプレートタグや、functions.phpに書いたプログラムを投稿記事で使うことができるようになります。知っているとちょっと便利なので、ぜひ覚えておきましょう。 簡単なショートコードの作り方 ショートコードを使う場合は、テーマ内のfunctions.phpに記入します。一番簡単な、ただのテキストを出力するショートコードです。fuctions.phpの一番下に次のコードを追加します。 function hogehoge() {    return "テキストを表示します"; } add_shortcode('hoge', 'hogehoge'); これで、[hoge]といういショートコードを使うことができるようになりました。管理画面の投稿の編集画面で、[hoge]と入力し、プレビューを確認すると[hoge]と入力したところに、「テキストを表示します」と表示されます。 add_shortcode('hoge', 'hogehoge');という関数で、ショートコードを追加しています。かっこの中の一つ目の「hoge」は、投稿の編集画面に入力するコード、二つ目の「hogehoge」はfunctions.php内で実行する関数を入力します。 とても簡単なショートコードですが、サイト内で繰り返し使う文言で、将来的に変更になる可能性がなるものをショートコードにしておくと、後から一括で変更できて便利です。 テンプレートタグを投稿記事内で使うショートコード テンプレートの中で使うことができるテンプレートタグも、ショートコードで呼び出すことができます。functions.phpの一番下に次のコードを追加します。 function blogname_func() {    return get_bloginfo('name'); } add_shortcode('blogname', 'blogname_func'); そして、編集画面で[blogname]と入力すると、記事内にサイトのタイトルを表示することができます。 テーマのディレクトリのURIを取得して、テーマで使っている画像のURLを出力したりと便利に使うことができます。 おまけ:ちょっとしたプログラムを動かす phpが分かる場合は、ちょっとしたプログラムをfunctions.phpに書いて、結果をショートコードで出力することができます。 例えば、次のコードは、[countdate]というショートコードで、2020年7月24日まであと何日残っているかを出力するというものです。 function...

Wordpressで固定ページを作成する際、投稿ページには必要だけど固定ページには必要ない!という表示項目がいくつかあると思います。特に「ページのタイトル」と「投稿日・更新日」は、固定ページには不要の場合が多いのではないでしょうか。今回は、シンプルでカスタマイズしやすく多くのサイトで使われているテーマSimplicityでの設定方法をご紹介します。 固定ページの投稿日、更新日を非表示にする 投稿日、更新日の表示/非表示は【外観】-【カスタマイズ】―【レイアウト(投稿・固定ページ)】で設定できますが ここで設定すると、投稿ページの投稿日・更新日も表示されなくなってしまい不便です。固定ページのみ投稿日・更新日を非表示にする場合は、スタイルシートstyle.cssに以下を追加します。 [html] #post-×× .post-meta { display: none; } [/html] post-××の××には投稿日・更新日を非表示にしたい固定ページのページIDを記入します。 固定ページのタイトルを非表示にする 固定ページを作成する際にタイトル欄を空欄にすればタイトルは表示されませんが、それでは管理上いろいろと不都合が生じます。スタイルシートstyle.cssを編集してタイトルを非表示にします。 すべての固定ページでタイトルを非表示にする スタイルシートstyle.cssに以下を追記する。 [html] .type-page h1, .type-page .post-meta{ display:none; } [/html] 上記のコードを追記した場合、メタ情報がすべて非表示になります。メタ情報を残したい場合は、以下のようにコードを書きます。 [html] .page .entry-title { ...

ワードプレスのテーマ「Simplicity」はシンプルで使いやすい ワードプレスの魅力の一つに、テンプレートを変えるとサイトの雰囲気ががらりと変わるという点があります。テンプレートも探してみるととてもたくさんあり、選ぶのに一苦労。そこで、今回は「Simplicity」というテーマをご紹介します。 「Simplicity」は、余計な装飾が省かれたシンプルなテーマです。余計な装飾がない分、後から自分でカスタマイズがしやすくなっています。スタイルシートが苦手という方も、スキン機能である程度手軽に外観を変更できる機能もあります。 Simplicityの特徴1.内部SEO施策がされている   Simplicityは同じ質のコンテンツなら検索エンジンで上位に表示されるよう複数の内部SEO施策がされています。タイトルや見出しなどに最適なHTML構造にしたり、パンくずリストでサイト構造を適切に伝えたりと、様々なSEO対策がされています。 Simplicityの特徴2.SNSで拡散されやすい仕組み おもしろい記事があればSNSで一気に拡散されるようになりました。SimplicityではメジャーなSNSの拡散用のボタンがデフォルトで設置されています。ウィジェットで任意の場所に手軽に追加をすることができます。     さらに、FacebookのOGPのタグやTwitterのCardsタグがデフォルトでソース内に挿入することができます。 Simplicityの特徴3.デバイスに合わせた4つのスタイル Simplicityは、パソコンとモバイルの両方に対応されています。さらに、それぞれ高解像度と低解像度の2種類ずつ用意されていて、サイトを訪問した人が見やすいスタイルで表示されるように工夫することができます。 訪問者のデバイスによって、広告や表示を工夫して、より見やすいサイトを構築することができます。 さらに、完全レスポンシブ機能も追加されており、完全なレスポンシブデザインでも使用することができます。 Simplicityの特徴4.広告用のウィジェットで簡単に収益化 Simplicityでは、サイト内に広告を表示させるためのウィジェットが用意されています。サイトに広告を設置して収益をあげたいという場合にもおすすめのテーマです。     Simplicityの特徴5.本文が読みやすいスタイル サイトの主役はやっぱり本文です。どんなにおしゃれなサイトでも、広告などでぐちゃぐちゃして本文が読みにくければ訪問者は読んでくれません。 Simplicityでは、本文カラムを大きくしたり、適度な大きさの画像がデフォルトで表示されたりと、本文が読みやすいようなスタイルになっています。 Simplicityで思い通りのサイトを 自分でカスタマイズをして思い通りのサイトを構築したいとい方には、とっても使いやすいワードプレスのテーマ「Simplicity」。公式サイトにはカスタマイズのTipsもたくさん公開されています。ぜひ使ってみてください。...