【WordPress】作業は"コピペ"のみ!デザインや機能性を向上させるコード6選
コンテンツマーケティングの時代とはいえ、WordPressである程度記事を書き溜めてくると、デザインや使いやすさにも注意を払いたくなることがあります。せっかく素晴らしい内容の記事を書いても、読みやすいデザインになっていなければ、記事の価値が目減りすることに気づき始めるからです。
そこで今回は、少しのコードをコピー&ペースト(以下、コピペ)するだけで、WordPressのデザインや機能性を向上させる便利なコードを6個ご紹介します。
コピペだけでWordPressのデザインや機能性を向上させるコード
1. 丸いサムネイルを出力する
ブログサイトのトップページや、記事一覧のサイドバーで表示される機会の多いアイキャッチ画像。SNSでシェアする場合にも表示されるので、設定しておきましょう。
デフォルトではアイキャッチ画像は利用できないので、functions.phpに下記のコードを追加します。
<code>
add_theme_support( 'post-thumbnails' );
</code>
アイキャッチ画像を正方形にしたい場合には、set_post_thumbnail_size ( XXX, XXX ) を指定します。例えば、set_post_thumbnail_size( 100, 100 )とすると、100x100の正方形のサイズもサムネイルとして保存されます。
<code>
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100 );
</code>
また、set_post_thumbnail_size (XXX, XXX, XXX) の3つ目の因数をtrueにすることで、そのサイズで画像が切り抜かれます。
<code>
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 100, 100, true );
</code>
functions.phpでアイキャッチ画像の設定ができたら、index.phpなどのテンプレートファイルの任意の場所に下記のコードを挿入してアイキャッチ画像を表示します。
<code>
<?php the_post_thumbnail(); ?>
</code>
アイキャッチ画像には「wp-post-image」というクラスが付加されています。これを利用して、CSSにborder-radiusを指定してあげると、丸いサムネイルが取得できるというわけです。
<code>
img.wp-post-image {
border-radius: 50%;
}
</code>
2. アイキャッチ画像を利用した擬似パララックス
アイキャッチ画像をタイトルの背面に敷き詰めて、ヒーローイメージを作ります。その際、スクロールするとアイキャッチ画像が固定されており、パララックスに似た印象を与えることができます。
※正確には背面の画像は動いていないのでパララックスではありません
まず、index.phpやsingle.phpなどのループ部分の背景にアイキャッチ画像を敷きます。その中に、タイトルや日付などを入れます。
<code>
<div id="herobox" style="background:url('<?php $image_id = get_post_thumbnail_id();$image_url = wp_get_attachment_image_src ($image_id, true);echo $image_url[0];?>')">
<a href="<?php echo the_permalink(); ?>"><h2><?php the_title(); ?></h2></a>
<div class="post_date"><?php the_date(); ?><</div>
</div>
</code>
ここでは、サムネイルのURLだけを知りたいので、サムネイルidを調べて、URLのみを返すやり方を使っています。
CSS部分では、background-cover属性を設定することで、背景画面を全面に敷くことができます。
さらに、flexboxを活用することで、中に入れてある要素をボックスの中央に配置させます。background-attachmentでfixedを指定することで、背景画像が固定化されます。
<code>
#herobox {
background: url("./default.jpg")
background-position: center center;
background-cover: cover;
background-repeat: no-repeat;
background-attachment: fixed;
display: block;
width: 100%;
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 10px;
text-shadow: 0 1px 2px #333;
color: white;
}
</code>
スマートフォンでは表示が上手くいかないことがあります。その場合はMediaQueryで以下の指定をしてあげましょう。
<code>
#herobox {
background-attachment:scroll !important;
}
</code>
こうすると、スクロールによる背景の固定はされませんが、背景画像が拡大されすぎて何の画像かわからなくなるというバグを回避することができます。
3. Twitterアカウント名が出てきたら自動リンク化する
「@アカウント名」が出てきた時に自動でTwitterのリンクが生成されたら、編集作業の工程も減るので楽になります。これを実現するために、正規表現を使って@で始まる文字列を探し、Twitterアカウントへのリンクに置換します。
<code>
function add_twitter_link($result) {
$pattern= '/(?<=^|(?<=[^a-zA-Z0-9-_\.]))@([A-Za-z]+[A-Za-z0-9_]+)/i';
$replace= '@<a href="http://www.twitter.com/$1">$1</a>';
$result= preg_replace($pattern, $replace, $result);
return $result;
}
add_filter( "the_content", "add_twitter_link" );
</code>
@の前にも正規表現を使っているのは、メールアドレスだった場合にリンク化しないようにするためです。
4. 新着記事に「NEW!」と表示word
記事一覧を表示するテンプレートファイルに下記のコードを追加することで、新着記事に「NEW!」という文字を追加することができます。
<code>
$post_time = get_the_time('U');
$days = 5;
$last = time() - ($days 24 60 * 60);
if ($post_time > $last) {
echo '<span style="color:red">NEW!</span>';
}
</code>
上記の例では5日以内に公開された記事が対象ですが、$daysの数を変えることで調整することができます。
5. サイドバーのカテゴリーをカテゴリーごとにデザインする
サイドバーなどでカテゴリーリストを表示する場合には、下記を使います。
<code>
<?php wp_list_categories(); ?>
</code>
すると、このようなHTMLが出力されます。
<code>
<ul class="cat">
<li class="cat-item cat-item-1"><a href="#">Product</a></li>
<li class="cat-item cat-item-2"><a href="#">Event</a></li>
<li class="cat-item cat-item-3"><a href="#">Access</a></li>
</ul>
</code>
これを利用して、ul内の要素の順番を:nth-childで指定してあげれば、li要素ごとのデザインが可能になります。
<code>
ul.cat:nth-child(1){
color:red;
}
ul.cat:nth-child(2){
color:green;
}
ul.cat:nth-child(3){
color:blue;
}
</code>
上記はシンプルに色を変えているだけですが、CSSを編集することでさらに凝ったデザインも可能です。
6. 日付を「●日前」表示にする
ちょっとした小技ですが、日付を「●日前」と表示させてみましょう。
まずは、functions.phpに下記のコードを追加します。
<code>
function x_time_ago( $type = 'post' ) {
$d = 'comment' == $type ? 'get_comment_time' : 'get_post_time';
return human_time_diff($d('U'), current_time('timestamp')) . " " . __('前');
}
</code>
続いて、ループ内の表示させたいところに、下記のコードを挿入します。
<code>
<?php echo x_time_ago(); ?>
</code>
こうすることで、「4日前」といった形で日付が表示されるようになります。
まとめ
以上が、"コピペ"するだけで、デザインや機能性を向上させてくれるるWordPressのコードでした。
いかがでしたでしょうか。
まずは気になったものがあれば、ブログを書く際、ぜひ取り入れてみてください。きっと普段の記事にアクセントを与え、よりコンテンツの質も引き上げてくれるはずです。
今回は、コピー&ペーストで簡単に実装できるWordPressまわりのコードを紹介しました。ぜひ使ってみてください!
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- マーケティング
- マーケティングとは、ビジネスの仕組みや手法を駆使し商品展開や販売戦略などを展開することによって、売上が成立する市場を作ることです。駆使する媒体や技術、仕組みや規則性などと組み合わせて「XXマーケティング」などと使います。たとえば、電話を使った「テレマーケティング」やインターネットを使った「ネットマーケティング」などがあります。また、専門的でマニアックな市場でビジネス展開をしていくことを「ニッチマーケティング」と呼びます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- シェア
- シェアとは、インターネット上で自分が見つけて気に入ったホームページやブログ、あるいは、Facebookなど自分自身が会員登録しているSNSで自分以外の友達が投稿した写真、動画、リンクなどのコンテンツを自分の友達にも共有して広めたいという目的をもって、SNSで自分自身の投稿としてコンテンツを引用し、拡散していくことをいいます。
- サムネイル
- サムネイルとは、多数の画像や動画など、読み込みに時間のかかる情報の概要をおおまかに把握するために作られた縮小画像のことです。 一般的にはサイズ・画質が落とされた画像が採用され、該当の画像や動画を読み込むかどうかを判断するための「見本」として使われます。 元々は親指の爪(thumb nail)という意味を持つ言葉で「サムネ」と略して呼ばれることもあります。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- サムネイル
- サムネイルとは、多数の画像や動画など、読み込みに時間のかかる情報の概要をおおまかに把握するために作られた縮小画像のことです。 一般的にはサイズ・画質が落とされた画像が採用され、該当の画像や動画を読み込むかどうかを判断するための「見本」として使われます。 元々は親指の爪(thumb nail)という意味を持つ言葉で「サムネ」と略して呼ばれることもあります。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- タイトル
- ホームページのソースに設定するタイトル(title)とは、ユーザーと検索エンジンにホームページの内容を伝えるためのものです。これを検索エンジンが認識し検索結果ページで表示されたり、ユーザーがお気に入りに保存したときに名称として使われたりするため、非常に重要なものだと考えられています。「タイトルタグ」ともいわれます。
- サムネイル
- サムネイルとは、多数の画像や動画など、読み込みに時間のかかる情報の概要をおおまかに把握するために作られた縮小画像のことです。 一般的にはサイズ・画質が落とされた画像が採用され、該当の画像や動画を読み込むかどうかを判断するための「見本」として使われます。 元々は親指の爪(thumb nail)という意味を持つ言葉で「サムネ」と略して呼ばれることもあります。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- クロール
- クロールとは、検索エンジン内のシステムであるクローラ(ロボット)が一つ一つのサイトを巡回し、サイトの情報を収集することを指します。
- アカウント
- アカウントとは、コンピューターやある会員システムなどサービスを使うときに、その人を認識する最低必要な情報として、パスワードと対をなして使う、任意で決めるつづりです。ユーザー、ID、などとも言います。
- Twitterとは140文字以内の短文でコミュニケーションを取り合うコミュニティサービスです。そもそもTwitterとは、「小鳥のさえずり」を意味する単語ですが、同時に「ぺちゃくちゃと喋る」、「口数多く早口で話す」などの意味もあります。この意味のように、Twitterは利用者が思いついたことをたくさん話すことのできるサービスです。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- HTML
- HTMLとは、Webページを記述するための言語です。"HyperText Markup Language "の略です。"<"と">"にはさまれたさまざまな種類の「タグ」によって、文章の構造や表現方法を指定することができます。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
- ブログ
- ブログとは、ホームページの一種です。運営者はブログシステムに登録し、利用開始をすることで、ホームページ制作のプログラム技術を修得する必要なく、本文のみを投稿しつづければ、公開・表示はおろかページの整理や分類なども効率的に行えるシステムを言います。
- コンテンツ
- コンテンツ(content)とは、日本語に直訳すると「中身」のことです。インターネットでは、ホームページ内の文章や画像、動画や音声などを指します。ホームページがメディアとして重要視されている現在、その内容やクオリティは非常に重要だと言えるでしょう。 なお、かつてはCD-ROMなどのディスクメディアに記録する内容をコンテンツと呼んでいました。
- WordPress
- WordPressとは、CMS(コンテンツマネジメントシステム)の1種で、ホームページ管理システムのことです。ブログ感覚で記事の修正・追加が行えるうえ、通常のホームページ並みのデザインを作成することができます。
おすすめ記事
関連ツール・サービス
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング