WordPress(ワードプレス)の使い方は用途によって異なります。ホームページとして使うのか、ブログとして使うかの?WordPressの使い方について、サーバーの設定、テンプレート。プラグインの選び方などをまとめています。

WordPress機能追加のお役立ちリンク(Tips)

  • HOME »
  • WordPress機能追加のお役立ちリンク(Tips)
  1. レスポンシブWebデザインのサイトで小さい画像が元サイズより拡大されないようにする
  2. パスワード保護したページのタイトルから”保護中”という表示を消す
  3. サイドバーにスクロール追尾するソーシャルボタンを表示する
  4. YouTube動画をレスポンシブ対応にする
  5. 固定ページに子ページのタイトルとリンクを表示する
  6. リンクが設定されている画像がマウスオーバーされると変化させる
  7. ページの先頭(トップ)へ戻るボタンの設置
  8. ダッシュボードのAnalyticsのサマリーを表示する
  9. 固定ページ一覧に「順序」の項目を追加する

レスポンシブWebデザインのサイトで小さい画像が元サイズより拡大されないようにする

レスポンシブデザインのテーマを使うと、画像を貼り付けてもサイズが表示幅に合わせて拡大、縮小してくれて便利です。

ただ、表示サイズが小さくなったタイミングで、小さい画像が元画像より大きなサイズに引き伸ばされる場合があります。

元画像よりも引き延ばされると当然画像が荒れますのでこの拡大は避けたいところです。

その際に、設定するといいのが「max-width」です。これを設定しておくと、この値以上には拡大されません。

サイトURL : http://allabout.co.jp/gm/gc/400630/

パスワード保護したページのタイトルから”保護中”という表示を消す

会員ページなんかを作ってパスワードで保護することがありますが、ページのタイトルに”保護中”と表示されることがあります。

はっきりっってダサいのでこれをカットしたかったのですが、functions.phpに以下のコードを追加することであっさりカットできました。

参考URL : http://technolog.jp/website/cms/5168

サイドバーにスクロール追尾するソーシャルボタンを表示する

「忍者おまとめボタン」でボタン表示用のコードを作る

http://www.ninja.co.jp/omatome/

「ななびかた⇒たて、表示位置⇒左、スマートフォン表示⇒無効」にしてコードを作成する 

以下のようなコードが作成されるのでテーマファイルで、本文の下などに追記する

スタイルシート(CSS)に以下の設定を追加する 

※”いいね”が”Like”と表示される場合は、CSS中に”en_US”と表示されている箇所を”ja_JP”に修正すると直る場合がある。

参考サイト:http://bulldra.hatenablog.com/entry/2014/03/29/145534

YouTube動画をレスポンシブ対応にする

以下のCSSを追加して、HTMLを動画を埋め込みたい箇所に記述する

CSS

HTML側 

参考URL

http://www.doghands.com/wordpress/responsive-videos/

固定ページに子ページのタイトルとリンクを表示する

テーマファイルの「page.php」を直接編集するか、このファイルを使ってテンプレートを作って本文の下に子ページを表示するコードを記述します。

本文は、以下のコードがある場所に表示されます。

たとえば、このコードの下に 子ページのタイトル一覧を表示するならば、以下のコードを記述して保存します。

参考URL:http://kachibito.net/wp-code/display-excerpts-of-child-pages-with-a-shortcode

http://yotsuba-d.com/blog/post-6246/

http://elearn.jp/wpman/function/get_posts.html

リンクが設定されている画像がマウスオーバーされると変化させる

マウスオーバーすると画像が代わる効果といのは、メニューなどでよく使われる手です。

WordPressでもテーマのメニューでそのような効果が付けられているものが多くあります。

ただ、自分で作ったページに貼り付けた画像に対してそのような効果を付けるのはHTMLを直接編集する以外の方法では難しいです。

まず、HTMLに詳しくない方にはハードルが高すぎます。

そこで代替案というか、折衷案として、リンクが設定されている画像についてはその透明度に変化をつけることで似たような効果を出す方法がありあります。

やり方は簡単で、以下のCSSを追加するだけです。

後は、リンクを設定した画像に自動的にマウスオーバーするだけで画像の透明度に変化がつきます。

参考URL:http://usable-information.com/index.php?%E3%83%9E%E3%82%A6%E3%82%B9%E3%82%AA%E3%83%BC%E3%83%90%E3%83%BC%E3%81%A7%E3%83%AA%E3%83%B3%E3%82%AF%E7%94%BB%E5%83%8F%E3%82%92%E5%8D%8A%E9%80%8F%E6%98%8E%E3%81%AB%E3%81%95%E3%81%9B%E3%82%8B%E6%96%B9%E6%B3%95

ページの先頭(トップ)へ戻るボタンの設置

プラグイン「Scroll to Top」を使う

そのままではボタンの位置が中央になるので右寄せのために編集をする

参考URL:http://shapedream.net/wordpress-plugin-scrolltotop/

ダッシュボードのAnalyticsのサマリーを表示する

プラグイン「Google Analytics Dashboard for WP」を使う

プラグインURL:https://ja.wordpress.org/plugins/google-analytics-dashboard-for-wp/

※以前は、プラグイン「Google Analytics Dashboard」をご紹介していましたが最近更新されていないようです。(2015年9月追記)

 

固定ページ一覧に「順序」の項目を追加する

 「function.php」の最後に以下のコードを追加する

参考URL:http://www.warna.info/archives/1661/

このページは最終更新日から1年が経過しています。
情報が古い可能性がありますのでご注意願います。
新しい情報があるかもしれませんのでこちらから検索してみてください。

既存サイトをWordPressへ移行する方法

既存サイトをWordPressへ移行する方法

HTMLで作成された既存サイト(ホームページ)をWordPress化する方法を動画にまとめました。

移行に必要な手順を順を追って丁寧に解説した動画です。

もし、あなたの既存サイトをWordPressに移行したいとお考えでしたらご覧ください。⇒ こちらからご登録ください。1分以内にご覧いただくことができます。

PAGETOP