CSSだけで動くドロワーメニューPure Drawer

NoImage

Pure Drawerというcssだけで動くドロワーメニューです。
PCとスマホでメニューを変えられない。
あまり多い数のメニューには対応できない。
等の欠点はあるが、使いやすいです。
完成後に導入したので、動きが思うようになりませんでしたが、
次回は最初からこれで作りたいです。

参考サイト
https://blog.mismithportfolio.com/web/20151003puredrawer
http://glow-factory.com/blog_web/css/pure-drawer/

公式サイト
http://mac81.github.io/pure-drawer/

PHPの書き方色々

NoImage

<dl id="wlistb">   
        
		  <?php global $post; $args = array( 'posts_per_page' => 5 ,'cat' => '4,5,6,7' );
          $myposts = get_posts( $args );
          foreach( $myposts as $post ) {
            setup_postdata($post);
            ?>
            <?php $cat = get_the_category(); $cat = $cat[0]; ?>
            
              

<dt class="<?php echo $cat->category_nicename; ?>" id="post-<?php the_ID(); ?>" <?php post_class( 'post' ); ?>><?php the_time('Y.m.d') ?> </dt>


<dd><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dd>

              
            
            <?php } wp_reset_postdata(); ?>
     </dl>

 

 

&nbsp;
<dl><!--?php foreach($my_posts as $post): setup_postdata($post); ?-->
 	<dt id="post-&lt;?php the_ID(); ?&gt;" class="&lt;?php echo $cat-&gt;category_nicename; ?&gt;">&gt;<!--?php the_time('Y.m.d') ?--></dt>
 	<dd><a href="”&lt;?php">”&gt;<!--?php the_title(); ?--></a></dd>
</dl>
<!--?php endforeach; ?-->
<!--?php wp_reset_postdata(); ?-->

CSS3–シンプルな矢印アイコン29個

NoImage

cssでここまで出来るといちいち画像作る必要ないですね。
CSSで作るシンプルな矢印アイコン29個

google font の使い方

NoImage

https://fonts.google.com/?selection.family=Arima+Madurai|Titillium+Web

1)良さそうなフォントを探す
2)SEE SPECIMEN をクリック
3)気に入ったら、SELECT THIS FONT
4)右下のタブをクリックして開く
5)STANDARD にあるソースをコピペしてheaderに記述

<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet"> 

6)Specify in CSS にあるCSSをスタイルシートの該当箇所に記述

font-family: 'Arima Madurai', cursive;

7)フォントの数は複数にできる。1サイトで10フォントを使うなら、一度にセレクトして一行に書くことができる。
8)減らす場合は、右下タブのyour selection のマイナスをクリックする

トップページじゃない固定ページに最新記事5件をカテゴリー指定して出したい!

NoImage

WordPressで固定ページをブログのトップとして記事を一覧表示する方法

上手くいった書き方。

<dl id="wlistb">   
           
		  <?php
          global $post;
		  $args = array( 'posts_per_page' => 5 ,'cat' => '4,5,6,7' );
          $myposts = get_posts( $args );
          foreach( $myposts as $post ) {
            setup_postdata($post);
            ?>
            <?php 
	$cat = get_the_category();
	$cat = $cat[0];
?>
            
              
                <dt class="<?php echo $cat->category_nicename; ?>" id="post-<?php the_ID(); ?>" <?php post_class( 'post' ); ?>><?php the_time('Y.m.d') ?> </dt>
                <dd><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></dd>
              
            
            <?php
          }
          wp_reset_postdata();
          ?>
     </dl>
     
<?php
          global $post;

		  $args = array( 'posts_per_page' => 5 ,'cat' => '4,5,6,7' );
<!--取得件数5件、カテゴリーID4,5,6,7-->

          $myposts = get_posts( $args );
<!--get_posts - 条件にマッチする投稿情報を取得する-->

          foreach( $myposts as $post ) {
<!--foreach文は配列に含まれる各要素の値を順に取り出し処理したい場合に便利な文-->
<!--「$myposts」の中にはカテゴリーIDが8の投稿記事が全件入ってましたよね。
では次に「foreach($my_posts as $post):」をすることで「$myposts」(記事の一覧)の内の1件の投稿記事を「$post」へ渡しています。-->
            setup_postdata($post);
            ?>
<!--「setup_postdata($post)」をすることで「今からこの記事を使いたいから〜〜〜〜」とWordPressに教えています。
※setup_postdata=ポストデータをセットアップする。拳銃に玉を詰めて、引き金を引いた状態にしたって感じでしょうか。-->

(略)


<?php
          }
          wp_reset_postdata();
          ?>

<!--グローバル変数$postや各種投稿付随情報も更新されることになり、ページの表示内容に影響を及ぼしてしまう。このwp_reset_postdata関数は、$postをメインの投稿情報に切り替え、各種投稿付随情報も初期状態に戻す。-->

上記はget_postsを使っている。似たものに、query_postsというものがる。
どう使い分けたらいいのか。
get_postsでは条件分岐が使えない。
サイドバーではget_postsがいい。
get_posts – 条件にマッチする投稿情報を取得する
query_posts – 条件を指定して投稿情報をロードする

理由はわからないが、色々なやり方が紹介されていたのに、
どれもまったく表示してくれなかった。
WP_Queryで投稿データを取得する【追記あり】


<?php
/**
 * Template Name: Blog Archive
 */
get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">
			
		<?php
		$paged = (int) get_query_var('paged');
		$args = array(
			'posts_per_page' => 10,
			'paged' => $paged,
			'orderby' => 'post_date',
			'order' => 'DESC',
			'post_type' => 'post',
			'post_status' => 'publish'
		);
		$myquery = new WP_Query($args);
		
		if ( $myquery->have_posts() ) :
			?>
			<header class="archive-header">
				<h1 class="archive-title">ブログアーカイブ</h1>
			</header><!-- .archive-header -->
			<?php
			
			while ( $myquery->have_posts() ) :
				$myquery->the_post();
				
				get_template_part( 'content', get_post_format() );
				
			endwhile;
			
			if ( $myquery->max_num_pages > 1 ) :
			?>
			<nav class="navigation" role="navigation">
				<div class="nav-previous alignleft"><?php echo get_next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ), $myquery->max_num_pages ); ?></div>
				<div class="nav-next alignright"><?php echo get_previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
			</nav>
			<?php 
			endif;
			?>
			
		<?php else : ?>
			<?php get_template_part( 'content', 'none' ); ?>
		<?php endif; ?>
			
		
		<?php
		// reset post data
		wp_reset_postdata();
		?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

固定ページに最新記事を表示する


<?php
//最新5件を表示
$paged = get_query_var('paged'); //現在のページ番号
$num = 5; //表示件数
query_posts('posts_per_page='.$num.'&paged='.$paged);
 
if ( have_posts() ) :
  while ( have_posts() ) : the_post();
    //テンプレートのフォーマット呼び出し
    get_template_part( 'content' );
  endwhile;
else :
  //記事がない時のテンプレート
  get_template_part( 'content', 'none' );
endif;
 
wp_reset_query();
?>

最新記事一覧でカテゴリーごとにアイコンをつけたい

NoImage

WordPressの記事のカテゴリー毎にアイコンを変更する分岐を作成する
こらがキモです。


<dd class=<?php echo $cats->category_nicename;?>
<?php 
$cats = get_the_category();
$cats = $cats[Θ];
?>
<?php if(have_posts()):?>
<dl>
<?php while(have_posts()):the_post();?>
<dd class=<?php echo $cats->category_nicename;?>
<a href="<?php the_permalink();?>">
<?php the_title();?>
</a>
<?php the_excerpt();?></dd>
<?php endwhile;?>
</dl>
<?php endif;?>

英文サイトで変な余白ができる

NoImage

word-break・・・文の改行の仕方について指定する(IEがCSS3の草案を先行採用)
以下で解消出来ました。

word-break:break-all;

WordPress のthe_excerpt() 抜粋で[…]のデザイン変更

img_wp

function.phpに記述

function new_excerpt_more($more) {
	return 'ここに変更したいもの';
}
add_filter('excerpt_more', 'new_excerpt_more');

例えば…

function new_excerpt_more($more) {
	return '...';
}
add_filter('excerpt_more', 'new_excerpt_more');
function new_excerpt_more($more) {
    global $post;
    return '……(<a href="' . get_permalink() . '">' . __('続きを読む') . '</a>)';
}
add_filter('excerpt_more', 'new_excerpt_more');

個別ページに特定テンプレートを作りたい

NoImage

固定ページの『トラブルページだけ』デザインを変えたいわ。
となった時のやりかたです。
各固定ページのページデザインをテンプレート選択で可能にする方法

レスポンシブのサイトでスマホの時だけtelリンクを有効にする

NoImage

レスポンシブのサイトでスマホの時だけtelリンクを有効にする

お問い合わせはこちら

月別アーカイブ

お気軽にお問い合わせください
受付時間9:00~19:00電話:050-3573-0080
受付時間24時間お見積もり・お問い合わせ