忍者ブログ
26 August

WPカスタムメニューヘッダーメニュードロップダウンメニュー デザイン

https://thewppress.com/libraries/implement-submenu-as-dropdown-list-on-the-navigation/

一部上記ありがたいコードをコピペ
menuをheader_menu_wrap で囲っておけばとりあえず形になる


.header_menu_wrap .menu{
display: flex;
       justify-content: flex-end;
    flex-wrap: wrap;
text-align:center;
 
}   
.header_menu_wrap .menu li a{
display:block;
color:#000;
padding:10px 15px;
}
/* サブメニューをabsoluteにするため、親メニューをrelativeに */
.menu-item-has-children {
  position: relative;
}
/* 親メニューにマウスオーバーしたときにカーソルを変更 */
.menu-item-has-children:hover {
  cursor: pointer;
}
/* 子を持つ親メニューにマウスオーバーしたときサブメニューを表示 */
.menu-item-has-children:hover .sub-menu {
  display: block;
}
/* サブメニューをabsoluteにして親メニューの下に配置。スタイルは適宜調整してください */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background: white;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
  padding: 0;
}
/* サブメニューの境目をわかりやすくするため、一番下の項目以外下線を引いた */
.sub-menu > .menu-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}
/* サブニューのリンクタグをmenu-itemの大きさと合わせ、クリックしやすいようにした */
.sub-menu > .menu-item a {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: .5em 0;
}
/* サブメニューにマウスオーバーしたときリンクの背景色とテキストカラーを変更 */
.sub-menu > .menu-item a:hover {
  background: black;
  color: white;
}
PR
06 February

静的html内でWPのphpを出力したい CPI KDDI

http://www.d-ic.com/blog/807

CPI
AddHandler x-httpd-php528 .php .html

.htaccsessに↑を書き込む
phpのあとのヴァージョン(数字)は新しいのに変更するとよい

http://acesr.document.secure.ne.jp/tools/php/


16 May

可変グリッド 並べる 異なるサイズ box Masonry.js

http://allabout.co.jp/gm/gc/402549/

西さんの説明はいつもちょーーわかりやすい!!
西さんが書いてくれるものは自分で考えることなくコピペでいけるレベル
頭にすんなり入ってくる

"columnWidth":

↑書かなくてもいけるってかいてあったけど、ぴっちり配列させたいときは指定しないとダメだった。
一番小さいboxのサイズに合わせたwidthをかく。
複数の横幅boxサイズがある場合は、クラスをつけてcssでわけるか、挿入imgにwidth heightをちゃんと指定する。
12 March

WPでログインしてる人のみ見える条件分岐

http://staku.designbits.jp/wp-is-current-user-login/

<?php if (is_user_logged_in()): ?>
  // ログインしている
<?php endif; ?>



いちいち確認してもらうのに非公開には出来ない部分もある
そこの場所をこれで囲う
12 March

無題

カスタム投稿タイプ記事のループをランダムで表示する
http://3bee.jp/2011/12/30/%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E6%8A%95%E7%A8%BF%E3%81%AE%E8%A8%98%E4%BA%8B%E3%82%92%E3%83%A9%E3%83%B3%E3%83%80%E3%83%A0%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%E3%80%82/



<?php $loop = new WP_Query( array( 'post_type' => 'カスタム投稿タイプ名', 'posts_per_page' => 表示させる件数, 'orderby' =>rand ) ); while ( $loop->have_posts() ) : $loop->the_post(); ?> <ul> <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li> </ul> <?php endwhile;wp_reset_query(); ?>
        
  • 1
  • 2
  • 3