bodyのidに今のページのスラッグ名を、classに先祖ページのスラッグ名を追加する | WordPress | 株式会社ベクトル Staff Blog
個人の技術ブログのDBのテーブルを自分で手動で削除しておきながら 「ブログが消えた―！！！！！！」 と大騒ぎしていた石川です。 はっはっは、想定外の事は起こるもの。みなさんもバックアップはちゃんとしましょうね！ さて、本題です。 ページによってCSSで表示を制御したい時ってありますよね。 静的HTMLでサイトを作る時はbodyタグにidやclass名を付けて制御する事も多いと思います。 今回はWordPressでbodyタグにidやclass名を付与する方法を少しご紹介します。 bodyタグのidにスラッグを割り当てる <body id="<?php echo esc_attr( $post->post_name ); ?>"> 現在のページの情報をclass名で出力 で、更に下記のように書くと、WordPressは今のページの情報（投稿タイプや投稿id、どのテンプレートが適応されてい
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
LINE Social Plugins
Click here if your browser does not automatically redirect you...
wordpress カスタム投稿のタームの出力いろいろ | WEBデザイナーのしおり
1.サイドバーに特定タームの記事一覧を表示 <?php $args = array( 'post_type' => 'タイプ名', 'taxonomy' => 'タクソノミー名', 'term' => 'ターム名', 'posts_per_page' => 10, 'numberposts' => '-1', ); $my_posts = get_posts($args); foreach ( $my_posts as $post ) { setup_postdata($post); ?> <li class="icon"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li> <?php } ?> ※posts_per_pageの数字は記事を何件表示するかの数字になります。 2.シンプルなターム一覧 <?php
【Sass】Sassでレスポンシブ！メディアクエリを便利に書こう。 | バシャログ。
気が付いたら8月突入してて茫然としたhakoishiです。 しかももう1/3過ぎてるとか冗談はおよし。 さて、今回はSassでメディアクエリを便利に管理できる書き方の一例をば。 まとめて書いて、コンパイルの際にブレイクポイント毎に分散させます。 最近、レスポンシブ対応でコーディングをする機会があったのですが、ブレイクポイント毎にそれぞれセレクタを書いていったら管理しきれなくなってしまいました。 まるで統一感のないソースに…！ そこで考えたのが、同じセレクタはまとめて記述し、その内部でメディアクエリごとの分岐も書く方法です。 更に、メディアクエリ毎にまとめて吐き出されるようにしました。 一度に視界に入る範囲であれば、統一感を保った記述もしやすいかと。 scssファイルの構成と記述内容 メディアクエリ分岐などの枠をstyles.scssに、スタイルは_media-query.scssに記述しま
WordPress制作時に良く使うコードスニペット：functions系 - NPO法人のためのIT支援事務所 ht
コードスニペットの最後のネタです。 fuctions.phpで良く使うコードです。 カスタムメニューの追加 [php] register_nav_menus( array( ‘header’ => ‘ヘッダーナビ’, ‘global’ => ‘グローバルナビ’, ‘footer’ => ‘フッターナビ’, ) ); [/php] ウィジェットの追加 [php] register_sidebar( array( ‘name’ => ‘サイドバーウィジェットエリア（上）’, ‘id’ => ‘primary-widget-area’, ‘description’ => ‘サイドバーのウィジェットエリア’, ‘before_widget’ => ‘<aside id="%1$s" class="widget-container %2$s">’, ‘after_widget’ => ‘</asid
WordPressのメディアアップローダーの”添付ファイル投稿URL”ってボタンを消してハッピーになる方法。 | Firegoby
WordPressのメディアアップローダーの”添付ファイル投稿URL”ってボタンを消してハッピーになる方法。 クライアントにWordPressを納入する際にいろいろ説明するわけですが、このボタンって説明が難しくないっすか！？ これ！ うきーっ！テンプレート用意してねーしっ！ ってことで、このボタンを消しちゃいました！ ソース 説明 ボタンを消す！ WordPressコアのソースを見たんですが、残念ながらこの部分にフィルターフックらしきものはなかったので、てっとりばやくCSSで消してます。 admin_print_styles というフックで以下のCSSを出してるだけです。 <style type="text/css">button.urlpost{display:none;}</style> 画像単独のページ（attachment.php?）を404にしてしまえ！ ボタンを消すだけでもいい
WordPressのちょっとしたテクニック備忘録 - やっぱりWebが好き - Writing Mode
ここ最近、Writing Modeの構築をはじめとするプライベートワークやら、「自分で全部作っちゃえ」的な小規模コーポレートサイトのお仕事などがいくつかあって、久しぶりにWordPressを本格的に弄っています。いい機会なので、これまでに蓄積したWordPressのちょっとしたテクニックをまとめておくことにします。Writing Modeでは初めて、そしてHiGash.Netのエントリーを振り 返ってみてもお久しぶりのWordPressネタ。 WordPressを使いはじめて、もう5年以上。この間、いろいろWordPressサイトを作ってきて、毎回必ず使う定番テクニックもあれば、いまだに「お。こんなタグあったんだ？」みたいな思わぬ発見に出くわすことも珍しくありません。 今日はこれまでに蓄積してきたWordPressのちょっとしたテクニックを、自分のための備忘録を兼ねてまとめてご紹介。 wp
jQueryでカレントページのメニュー画像に”_current”を付加して、親要素のアンカーを削除する方法 – creamu
$(function(){ var url = window.location.pathname; var currentSrc = $('#menu ul li a[href="'+url+'"]'); var current = currentSrc.children().attr("src").replace(/(.gif|.jpg|.png)$/, '_current'+"$1"); currentSrc.children().attr("src", current); currentSrc.children().unwrap(); }); ・var url = window.location.pathname; window.location.pathnameでサイトルート相対のカレントURLを取得 ・var currentSrc = $(‘#menu ul li a[href=
【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]
MovableType 小技集 【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） ソーシャルメディアの各サービスがこぞって「いいね！」などの共有ボタンをリリースしています。ブログやニュースメディアでも頻繁に目にする昨今ですが、色々なソーシャルボタンの設置方法をまとめて紹介したいと思います。 目次（兼ショートカット） Twitter「Twitterボタン」 Facebook「Share」「Like（いいね！）」 mixi「mixiチェック」 GREE「Social Feedback（いいね！）」 Evernote「Site Memory（Clip）」 Google+「＋１」 Tumblr「Share on Tumblr」 Pinterest「
![【更新】ソーシャルメディアに共有するボタンの設置方法（Twitter, facebook, mixi, GREE, Evernote, Google+, Tumblr, Pinterest, はてブ） [C!]](https://cdn-ak-scissors.b.st-hatena.com/image/square/81e0b24df3879e2c544ed147f55618364bfffef0/height=288;version=1;width=512/https%3A%2F%2Fcreazy.net%2Fwp%2Fwp-content%2Fuploads%2F2017%2F12%2F6943392493_78691ae59d.jpg)
デザインどや！？｜海外カジノ オンラインのWEB作成
Webページレイアウト、ナビゲーションプラグイン、フォーム、スライダー＆カルーセルプラグイン、チャート＆グラフプラグイン、イメージエフェクトプラグイン、ビデオプラグインなど。チェックしておきたいです。海外カジノ オンラインサイトの制作はワードプレスのプラグインを利用して様々な機能を付け加えて完成させることができます。2012年のjQueryプラグインまとめでは、デザインの一新や個別のカスタムにも対応した国際的で魅力的なサイト作成に役立つ情報を紹介しています。
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
15 Useful Code Snippets for Smartphone Website
2014年8月22日 Webサイト制作, スマートフォン スマートフォンが普及してきて、Webサイトを作る時、スマートフォンサイトも一緒に制作している方も多くなってきていると思います。私もスマホサイトを制作する機会が増え、だんだんEvernoteに保存していたスマートフォンサイトを作る時の小技がたまってきたので、iPhoneで使える小技を中心にまとめて記事にしてみます。いくつかサンプルも作っているので、スマートフォンからあわせてご覧下さい！ ↑私が10年以上利用している会計ソフト！ スマートフォンサイト用小技集 目次 いくつかサンプルも作ったのでスマートフォンから、もしくはブラウザーからユーザーエージェントをiPhoneなどに切り替えてご覧ください！ 横幅をデバイスの幅にあわせる 文字サイズの自動調整をオフ リストのクリック（タップ）範囲を広げる 画面の幅にあわせてCSSを変える リンクテ
これは便利！コピペで使える実用的なCSSテクニックいろいろ
div.tucked-corners { background: #f6f6f6; height: 380px; margin: 50px auto; padding: 10px; position: relative; width: 580px; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } ...詳細はリンク先を参照 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must
wordpress でページ毎に description を自動で設定する。
wordpress いじってたときに気づいたが、なんとデフォルトでは meta の description が空だったので。というか meta タグ自体なかった。なんでやねん。 というわけでSEO的にどこまで有効なのかはわかりませんが google の検索結果に表示される文章なわけだし明示的に指定しておいたほうがいいかなというわりと適当な理由で表示させる事にしました。 記載する内容は、 個別記事,固定ページ -> 抜粋、無ければ本文の先頭80文字 アーカイブ -> アーカイブのタイトルっぽい文言 にしました。以下コード。header.php 内にある、<head> 内に適当に配置。 <?php if ( is_single() || is_page() ) { if ($post->post_excerpt){ $description = $post->post_excerpt; } e
Useful CSS Snippets for Your Coding Arsenal
CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don't work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code. Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful
ブログやウェブサイトですぐに役立つ「.htaccess」の設定のまとめ | コリス
ブログやウェブサイトのパフォーマンス改善や運営・セキュリティに役立つ「.htaccess」の設定を紹介します。 .htaccess Files for the Rest of Us [ad#ad-2] 下記は各ポイントを意訳したものです。 リダイレクトとリライト オリジナルのエラーページ 特定のリソースへのアクセス制限 特定のIPのアクセス阻止 IEのレンダリングモードの設定 有効期限を設定してトラフィックを軽減 gzip圧縮の利用 リダイレクトとリライト リダイレクト サイトを移転したなど、永続的なリダイレクトには「HTTP301リダイレクト」で設定します。 転送先のURLは絶対URLで指定します。 Redirect 301 ^old\.html$ http://ドメイン/new.html リライト リライト（書き換え）をする場合は、下記のようになります。 RewriteEngine o
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webamb.com
How to Create a File Upload Form in WordPress (Easy Solution)
QueryPosts is retired