- レスポンシブWebデザインのサイトで小さい画像が元サイズより拡大されないようにする
- パスワード保護したページのタイトルから”保護中”という表示を消す
- サイドバーにスクロール追尾するソーシャルボタンを表示する
- YouTube動画をレスポンシブ対応にする
- 固定ページに子ページのタイトルとリンクを表示する
- リンクが設定されている画像がマウスオーバーされると変化させる
- ページの先頭（トップ）へ戻るボタンの設置
- ダッシュボードのAnalyticsのサマリーを表示する
- 固定ページ一覧に「順序」の項目を追加する
目次
レスポンシブWebデザインのサイトで小さい画像が元サイズより拡大されないようにする
レスポンシブデザインのテーマを使うと、画像を貼り付けてもサイズが表示幅に合わせて拡大、縮小してくれて便利です。
ただ、表示サイズが小さくなったタイミングで、小さい画像が元画像より大きなサイズに引き伸ばされる場合があります。
元画像よりも引き延ばされると当然画像が荒れますのでこの拡大は避けたいところです。
その際に、設定するといいのが「max-width」です。これを設定しておくと、この値以上には拡大されません。
サイトURL : http://allabout.co.jp/gm/gc/400630/
パスワード保護したページのタイトルから”保護中”という表示を消す
会員ページなんかを作ってパスワードで保護することがありますが、ページのタイトルに”保護中”と表示されることがあります。
はっきりっってダサいのでこれをカットしたかったのですが、functions.phpに以下のコードを追加することであっさりカットできました。
|
1 2 3 4 |
add_filter(‘protected_title_format’, ‘remove_protected’); function remove_protected($title) { return ‘%s'; } |
参考URL : http://technolog.jp/website/cms/5168
サイドバーにスクロール追尾するソーシャルボタンを表示する
「忍者おまとめボタン」でボタン表示用のコードを作る
http://www.ninja.co.jp/omatome/
「ななびかた⇒たて、表示位置⇒左、スマートフォン表示⇒無効」にしてコードを作成する
以下のようなコードが作成されるのでテーマファイルで、本文の下などに追記する
スタイルシート（CSS）に以下の設定を追加する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
div.hatena-bookmark-bookmark-panel { z-index:10350001 !important; } .ninja_onebutton { top: 90px; margin-left: -133px; float: left; position: fixed; border: solid 1px #ddd; background-color: #FFFFFF; padding: 10px 3px 0px 10px; width: 100px; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; box-shadow: 0 0 5px #DDDDDD; } |
※”いいね”が”Like”と表示される場合は、CSS中に”en_US”と表示されている箇所を”ja_JP”に修正すると直る場合がある。
参考サイト：http://bulldra.hatenablog.com/entry/2014/03/29/145534
YouTube動画をレスポンシブ対応にする
以下のCSSを追加して、HTMLを動画を埋め込みたい箇所に記述する
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
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を追加するだけです。
後は、リンクを設定した画像に自動的にマウスオーバーするだけで画像の透明度に変化がつきます。
|
1 2 3 4 |
a:hover img{ opacity:0.70; /* opera firefox safari */ filter: alpha(opacity=70); /* ie */ } |
ページの先頭（トップ）へ戻るボタンの設置
プラグイン「Scroll to Top」を使う
そのままではボタンの位置が中央になるので右寄せのために編集をする
|
1 |
jQuery(\”#scroll_to_top a\”).css({ ‘display’ : ‘none’, ‘z-index’ : ‘9’, ‘position’ : ‘fixed’, ‘top’ : ‘100%’, ‘width’ : ‘$width’, ‘margin-top’ : ‘-30px’, ‘right’ : ‘50%’, ‘margin-left’ : ‘-50px’, ‘height’ : ’20px’, ‘padding’ : ‘3px 5px’, ‘font-size’ : ’14px’, ‘text-align’ : ‘center’, ‘padding’ : ’10px’, ‘color’ : ‘#$color’, ‘background-color’ : ‘#$background_color’, ‘-moz-border-radius’ : ‘5px’, ‘-khtml-border-radius’ : ‘5px’, ‘-webkit-border-radius’ : ‘5px’, ‘opacity’ : ‘.8′, ‘text-decoration’ : ‘none’}); |
参考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」の最後に以下のコードを追加する
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
function check_post_type_support_page_attr() { $all_post_types = get_post_types( array('show_ui' => true ), false ); if ( !isset( $_REQUEST['post_type'] ) ) { $edit_post_type = 'post'; } elseif ( in_array( $_REQUEST['post_type'], array_keys( $all_post_types ) ) ) { $edit_post_type = $_REQUEST['post_type']; } else { wp_die( __('Invalid post type') ); } if ( post_type_supports( $edit_post_type, 'page-attributes' ) ) { add_filter( 'manage_' . $edit_post_type . '_posts_columns', 'add_menu_order_column' ); add_action( 'admin_print_styles-edit.php', 'add_menu_order_column_styles' ); add_filter( 'manage_edit-' . $edit_post_type . '_sortable_columns', 'add_menu_order_sortable_column' ); } } add_action( 'load-edit.php' , 'check_post_type_support_page_attr' ); if ( defined( 'DOING_AJAX' ) && DOING_AJAX ) { add_action( 'admin_init', 'check_post_type_support_page_attr' ); } function add_menu_order_column( $posts_columns ) { $new_columns = array(); foreach ( $posts_columns as $column_name => $column_display_name ) { if ( $column_name == 'date' ) { $new_columns['order'] = __( 'Order' ); add_action( 'manage_pages_custom_column', 'display_menu_order_column', 10, 2 ); add_action( 'manage_posts_custom_column', 'display_menu_order_column', 10, 2 ); } $new_columns[$column_name] = $column_display_name; } return $new_columns; } function add_menu_order_sortable_column( $sortable_column ) { $sortable_column['order'] = 'menu_order'; return $sortable_column; } function display_menu_order_column( $column_name, $post_id ) { if ( $column_name == 'order' ) { $post_id = (int)$post_id; $post = get_post( $post_id ); echo $post->menu_order; } } function add_menu_order_column_styles() { ?><?php } |
参考URL：http://www.warna.info/archives/1661/
情報が古い可能性がありますのでご注意願います。
新しい情報があるかもしれませんのでこちらから検索してみてください。
