WP スマホ メニューボタン

header.php <header> <div class="sitenav"> <button type="button" id="navbtn"> <i class="fa fa-bars"></i><span>MENE</span> 'sitenav', 'container' => 'nav', 'container_class' => 'mainmenu', 'container_id' => 'mainmenu' )); ?> </div> </header> ------ style.cs…

WP 固定ページテンプレート

----- 2: ファイル名をスラッグにする 例:スラッグ -> new page-new.php ------ 3:ファイル名をIDにする page-3.php

WP 特定のカテゴリー出力 , 全てのカテゴリーを出力

home.php ---- if($query->is_home() ) { $query->set('category_name','news'); # ('パラメータ', 'スラッグ'); } ---- category.php if($query->is_category() ) { $query->set('nopaging', true); # nopaging 全件出力 return; }

css table レスポンシブデザイン 0001

<style> .fa.fa-arrow-circle-o-right {color:#008fde; margin-right: 10px;font-size:22px;} .t_table_01 {width: 100%; } .t_table_01 tr {border-bottom: 2px solid #dedede;} .t_table_01 th {padding: 20px;width: 30%;border-bottom: 2.5px solid #dedede; ma…

wordpress ビズベクトル ヘッダー画像の大きさを変える

/* ヘッダー画像のサイズを変更 */ function my_biz_vektor_customheader_size() { return array(1500, 300); } add_filter('biz_vektor_customheader_size', 'my_biz_vektor_customheader_size');

wordpress テンプレート ビズベクトル 全体100% css

全体の幅を100%にする /* 外枠を100%に */#headerTop,#header,#topMainBnrFrame,#topMainBnr img,#main,#footMenu{ width: 100% !important;} /* 内枠を少し小さく */.innerBox,#header .innerBox,#pageTitBnr .innerBox,#panList .innerBox,#footMenu .inne…

CSS テーブル レスポンシブ

<style> .box_A {width:100%;} .box_b {width:45%; float:left;margin-right: 20px;} .boxb p {font-size: 28px; color:#008fde;} .box_bb {width:45%;float: left;} .t-table{width: 100%;max-width: 100%; margin-bottom: 20px;} .t-table th{border-top: 1px sol…

サムネの関数化

functions.php ---- function mythumb($size) { if(has_post_thumbnail()) { $postthumb = wp_get_attachment_image_src(get_post_thumbnail_id(), $size); $url = $postthumb[0]; } else { $url = get_template_directory_uri(). /'no-img.jpg'; } return $…

同じカテゴリー出力

'post', 'post_per_page' => '4', 'post__not_in' => array($post->ID), // 表示中の記事は出力対象から除外するため 'orderby' …

カスタムフィールド youtube プラグイン:Advanced Custom Fields

css .VideoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .VideoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ----- single.php など ----- <div class="VideoWrapper"> </div>

サムネサイズ

funcitons.php --- // サムネサイズfunction display_image($field_name, $size = 'medium') { $image = get_field($field_name); if(!empty($image)) { $url = $image['sizes'][$size]; // 画像URL $width = $image['sizes'][$size . '-width']; //画像の横…

サムネ 

functions.php ------ // サムネfunction display_thmbnail() { if(has_post_thumbnail()) { echo '<a href="'get_permalink().'">'. get_the_post_thumbnail('thumbnail').'</a>'; } else { echo '<a href="'. get_permalink().'"><img src="'. get_template_directory_uri().'/img/noimage.png" width="180" height="180"></a>

sidebar.php 新着情報 & 人気記事

functions.php register_nav_menu('pickupnav', 'おすすめ記事'); ------ sidebar.php <style>/* サイドバー 新着 */.mymenu h2 {margin-top: 0; margin-bottom: 10px; border-bottom: 2px solid #dddddd; color:#666666; font-size:14px;}.mymenu ul {margin:0; pa…

スマホ スライドボタン JS

nav.js jQuery(function(){ jQuery('#openbtn').click(function(){ jQuery('#mainmenu').slideToggle(); }); }); ---- functions.php // トグルbtn function navbtn_scripts() { wp_enqueue_script('navbtn-script', get_template_directory_uri() . '/nav.j…

固定ページ 分岐

特定の固定ページかどうかを判別するis_page 固定ページの判別には「is_page」を使用します。 こちらもカテゴリー同様に複数の場合は配列を使用してまとめて設定することができます。 ? 1 2 3 4 //固定ページのスラッグ名「contact」の場合 //固定ページの…

WordPRESS single.php previous_post_link(), next_post_link()

<nav class="postNavi"> <span class="prev"> </span> <span class="next"> </span> </nav>

WordPRESS 日付別 条件分岐タグ

・日付別アーカイブページが表示されている場合(例:月、年、日、時間) is_data() ----- ・年別アーカイブが表示されている場合 is_year() ----- ・月別アーカイブページが表示されている場合 is_month() ----- ・日別のアーカイブが表示されている場合 is…

WordPRESS サムネイル

<div class="th_img_top"> <figure> <a href="<?php the_permalink(); ?>"></a> <a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/img/noimage_180x180.png" height="180" width="180"></a> …</figure></div>

wordpress JS 読み込み メモ

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

テンプレートパーツの読み込み 作成

loop-main.phpを読み込む 任意のテンプレート名-任意の名前.php get_template_part('loop', 'main');

sidebar.php 月別アーカイブ 表示

single.php ------ ------ sidebar-archives.php <ul> 'monthly', // 月別を指定 'show_post_count' => true, // 投稿数を表示 ); wp_get_archives($args); ?> </ul>

wordpress sidebar.php カテゴリー 一覧読み込み

single.php ----- <div> </div> ------ sidebar-categories.php <section> <h1>カテゴリー一覧</h1> <ul> '', // 見出しを削除 'show_count' => true, // 投稿ス ); wp_list_categories($args); ?> </ul> </section>

WordPRESS カスタム投稿設定  カスタム構造

・投稿された日を取得する %day% ----- ・投稿された月を取得する %monthnum% ----- ・投稿された年を4桁で取得 %year% ----- ・投稿された時間 %hour% ----- ・投稿、固有のID取得 %post_id% ----- ・投稿の投稿名を取得する %postname% ----- ・投稿され…

WordPRESS テンプレ コピペ用

<img src="<?php echo get_template_directory_uri(); ?>/img/" alt=""> ---- <p></p> ----- <title> -----

WordPRESS sidebar.php

<div class="side_content"></div>

css ファビコン

サイズ(px) 表示場所 16×16 ブラウザのアドレス欄・タブ・ブックマーク(IE) 32×32 chrome、firefox、safari他主要ブラウザのタブ・ブックマーク 48×48 Windowsのサイトアイコン 64×64 高解像度のWindowsのサイトアイコン <link rel=”shortcut icon” href=”http://ファイルのパス/favicon.ico” /> <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> </link></link>

掲示板 WordPRESS

functions.php // コメント一覧カスタマイズfunction my_list_comments($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <li <?php comment_class(); ?> id="li-comment-"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-listCon"> <div class="comment-info vcard"> </div></div></div></li>

WordPRESS comments.php

<div id="comments" class="comments-area"> <h3 class="comments-title">『』へのコメント</h3> <ol class="commets-list"> </ol> <…</div>

WordPRESS テンプレ css

/*--------------------- wp tossy ----------------------*/ /* コンテイナー */.container{width: 1000px; margin-left:auto; margin-right: auto;} /*- コンテンツ */.content{padding:0; box-sizing:border-box;} /*-- gaiyou large 大サイズ */.gaiyou-…

WordPRESS single.php テンプレート ①

<div class="container"> <div class="content"> <article<?php post_class('kiji'); ?>> <h1></h1><div class="sub-header"> <div class="bread"> <ol> <li></li></ol></div></div></article<?php></div></div>

WordPRESS YouTubu & 外部コンテンツ

funcitons.php ---- // コンテンツ最大幅if(!isset($content_width)) { $content_width = 747;} // YouTube のビデオ :<div>でマークアップfunction ytwrapper($return, $data, $url) { if($data->provider_name == 'YouTube') { return '<div class="ytvideo">' . $return . '</div>'; } el</div>…

single.php  post_class で分岐

<div class="container"> <div class="content"> <article<?php post_class('kiji'); ?>> <h1></h1> </article> </div> </div>

wordpress 固定ページや記事ぺーじへの画像パス

大量の画像をアップしたいとき等、サーバへ直接、移行したほうがい場合 まず、サーバーのテーマフォルダの中に新規フォルダ「img」を作成し、その中に表示させたい画像をアップロード 次に下記をfunctions.phpに記述。 function replaceImagePath($arg) { $c…

wordpress header.php ①

language_attributes(); - 公式テーマとして登録する際は必須。個人で使用する場合は <html lang="ja">のままで大丈夫 <title><?php bloginfo('name'); ?></title><meta name="keywords" content="<?php bloginfo('keywords'); ?>"><meta name="description" content="<?php bloginfo('description'); ?>"> </meta></meta></html>

jQuery デバイス 判別

<p><img src="img/p_sp.jp" class="switch"></p> <styel> .switch{visibility: hidden; } </style> var setImg = $('.switch') , namePc = '_pc' , // PC用 nameSp = '_sp' , // スマホ用 switchwidth = 767; // 判別 setImg.each(function(){ var selfImg = $(this); function switchImg() { if(window.innerWidth > swit…

PHP 試験 上級 関数_001

<html><head> <meta charset="UTF-8"> <style> .img{} .img > img{width: 50%; height: auto;} </style></head> <body> </body></html>

PHP 試験 上級 メモ 配列_001

Javascript 投票 メモ

<html lang="ja"><head> <meta charset="utf-8"> <title>人気投票</title></head> <style> .gr4 > *{width: 23.4%; float:left;padding:0.4em;}img{width:100%; height: auto;}</style> <body> <div class="gr4"> <div> <p onclick='cnt("clk");'><img src="img/01.jpg"></p> </div> <div> </div></div></body></html>

WordPRESS header.php メタ og

・og:type 記事の種類。 content属性値:ブログや、ニュースの記事はarticleと指定。 ------ ・og:title 記事のタイトル。 で記事のタイトルを出力。 ------ ・og:url 記事のURL。 で記事の個別URLを出力。 ------- ・og:description 記事の概要。 で記事の…

コンタクトフォーム7 <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script> <p>郵便番号<br /> [text zip1 3/3 id:zip1] - [text zip2 4/4 id:zip2] </p> <p>都道府県<br /> [text prefecture 80/ id:prefecture]</p> <p>市区町村<br /> [text city 80/ id:city] </p> <p>町域大字・番地<br /> [text street 80/ id:street]…</p>

wordpress メモリンク

・高さをそろえる 参考 [jQuery] レスポンシブ:複数横並びdiv枠の高さを取得、最大値に揃える | ジュウロクデザイン www.webantena.net ---------- ・home.php に固定ページ出力 [WordPress]特定の固定ページの内容を取得して表示する | ホームページ制作 W…

wordpress ショートコード home.phpに出力

ショートコードを do_shortcode() 関数に引数として渡して、その出力を表示する必要があります。次のように: 1

WordPRESS カテゴリー テンプレタグ

single.php ◯記事が属するカテゴリーIDを取得 term_id; } } ?> /* get_the_category()で表示中の記事が属するカテゴリーに関するデータを取得し、IDを取り出して、$catkwdsに代入する。記事が複数の場合カテゴリーに属している場合は、すべてのカテゴリーID…

single.php ページ分岐

<h3 style="margin:5px;padding:0;">関連動画</h3> <div class="gr3 clearfix"> <div> 2, // 表示件数 'category' => 23, // カテゴリIDもしくはスラッグ名 'order' => 'ASC' )); ?> </div></div>

jQuery アニメーション メモ

<html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> </link></meta></meta></meta></head></html>

wordpress サムネイル メモ

functions.php /* 再度作成するサムネイルのサイズ設定 */ // 'large-feature'という名前で幅300px、高さ200pxのサムネイルを作成 add_image_size( 'large-feature', 300, 200 ); // 'middle-feature'という名前で幅200px、高さ100pxのサムネイルを作成 add_…

wordpress 文字数制限 PHP mb_strimwidth

1 2 3 4 5 6 //抜粋文の文字制限 add_filter('the_excerpt', 'my_the_excerpt'); function my_the_excerpt($postContent) { $postContent = mb_strimwidth($postContent, 0, 140, "…","UTF-8"); return $postContent; }

wordpress TOP メモ home.php

<div id="main_sec" class="main_section_<?php if ( get_option( 'column_position' ) == 0 ) : ?>0<?php endif; ?><?php if ( get_option( 'column_position' ) == 1 ) : ?>1<?php endif; ?>"> <h1 class="m1">見直し実績 2405社 見直しポイント<…</h1></div>

memo wordpress トップページ

<div id="main_sec" class="main_section_<?php if ( get_option( 'column_position' ) == 0 ) : ?>0<?php endif; ?><?php if ( get_option( 'column_position' ) == 1 ) : ?>1<?php endif; ?>"> <h1 class="m1"></h1> </div>

PHP 関数メモ

function img($file, $alt) { $s = '<p class="img"><img'; $s .= ' src="' . $file . '"'; $s .= 'alt="' . $alt . '"'; $s .= '/></p>'; return $s;} function top_link() { echo '<a href="index.html">TOP PAGE</a>'; } top_link(); echo '<br>';print_footer();echo '<br>';make_html(); ?>