wordpress 子ページのリスト表示

<ul>
<?php wp_list_pages('title_li=&child_of='.$post->ID.'&depth=1'); ?>
</ul>

投稿記事に自動で付いてしまうpタグを削除する方法

wp-includes/default-filters.php add_filter(’the_content’, ‘wpautop’); add_filter(’the_excerpt’, ‘wpautop’); 上記をコメントアウト

スマホ向けページ遷移JS

http://creatorish.com/lab/4832 htmlファイルが単体？

floatテキストの整形（IE用）

テキストの改行がIEでおかしくなるとき、 LIに「white-space: nowrap;」を追加

同じ日付の投稿の日付表示

表示させるには

<?php the_date('Y.n.j.'); ?>ではなく、
<?php the_time('Y.n.j.'); ?>

css3 IE用─ie-css3

ie-css3 position指定する。 position: relative; 指定しないと、上下がずれる。

あらゆるデバイスでサイトを確認できる

http://quirktools.com

オンライン画像編集ツール

http://pixlr.com/

makeshop tips

DOCTYPE宣言がないので、IEではQuirksモードになる。 フロートしている要素の最後がダブって表示されるバグが発生することあり。（IE6のバグ） float要素の中身の最後に、コメント追加

wordpress | “WP Social Bookmarking Light”表示コード

<?php if(function_exists("wp_social_bookmarking_light_output_e")){
    wp_social_bookmarking_light_output_e();
} ?>

レスポンシブ 画像サイズ指定CSS

img{
 max-width: 100%;
 height: auto;
 width /***/:auto;　/*IE8のみ適用*/
}

レスポンシブ対応のjquery slider

FlexSlider

http://www.woothemes.com/flexslider/

wordpress html valid

カテゴリーリンクの"rel"削除

functions.phpに下記追加

add_filter('the_category', 'remove_rel'); function remove_rel( $text ) { $text = str_replace('rel="category tag"', "", $text); return $text; }

PCにインストールされているフォントでテキストを表示してくれるサービス

preview words with the fonts installed on your computer 自分のPCにインストールされているフォントを使って、テキスト（コピー程度の長さ）を表示してくれるサービス。 http://wordmark.it/

wordpress ローカルでパスワードを忘れた時

１）phpMyAdmin起動 ２）データベース接続 ３）wp_userを選択して表示 ４）adminユーザーを編集 ５）user_passの関数をMD5にし、新規パスワードを入力

wordpress contactform7

bcc追加 追加ヘッダーに Bcc:メールアドレス

wordpress サイトURLを正規に

①管理画面の左メニュー「設定」「一般」を選択 ②WordPress のアドレス (URL)　⇒　そのまま ③サイトのアドレス　⇒　http://example.com/　に変更 ④「設定を保存」を押下 ⑤ http://example.com/wp/ 直下にある index.php を編集 　　require('./wp-blog-header.php'); 　　↓ 　　require('./wp/wp-blog-header.php'); ⑥ http://example.com/wp/ 直下にある index.php（⑤で編集したファイル） と .htaccess を http://example.com/ 直下にコピー

wordpress テンプレートタグ

タイトル

<?php bloginfo('the_title'); ?>

ギャラリー画像にクラス名追加

functions.phpに追加

add_filter( 'wp_get_attachment_link', 'my_get_attachment_link', 10, 6 );
function my_get_attachment_link( $link, $id, $size, $permalink, $icon, $text ) {
  return str_replace( '<img ', '<img class="hover" ', $link);
}

wordpress php内でショートコード使用

<?php echo do_shortcode('[my_calendar]'); ?>

wordpress ウィジェットエリア追加

functions.php のウィジェット部分コピー


register_sidebar( array(
'name' => __( 'Calender Area', 'twentyeleven' ),
'id' => 'sidebar-5',
'description' => __( 'An optional widget area for your site footer', 'twentyeleven' ),
'before_widget' => '

',
'after_widget' => "

",
'before_title' => '

',
'after_title' => '

',
) );

Calender Area　→　エリア名

表示させたい部分に

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Calender Area') ) : ?>
<?php endif; ?>

role属性

role="banner"
ドキュメントからの引用ですが、大見出し（標題）またはウェブサイトのタイトルを含むリージョンなので、ヘッダーに使うのが適していると思います。そのため、div id="header" role="banner"やheader role="banner"で使います。
role="complementary"
ドキュメントからの引用ですが、メインのコンテンツから切り離しても意味を持つ、文書の補足的なセクションですので、サブメニューで使うのが適しているかと思います。HTML5ではasideがありますので、aside role="complementary"
role="contentinfo"
ドキュメントからの引用ですが、親の文書に適用されるメタデータ。例えば、脚注、著作権の記載、プライバシーポリシーへのリンクが、これに当てはまる。ですので、フッターで使うのが適しているかと思います。そのため、div id="footer" role="contentinfo"やfooter role="contentinfo"で使います。
role="main"
値の名称からも想像できるかと思いますが、メインのコンテンツで使われます。HTML4.01/XHTML1.0でもHTML5でもdiv要素で使うことになるかと思います。
role="navigation"
ドキュメントからの引用ですが、ナビゲーション要素（通常はリンク）の集合ですので、グローバルナビゲーションなどに使うことになると思います。そのため、ul role="navigation"やnav role="navigation"で使います。
role="search"
検索ツールでので、form要素などに使うことになるかと思います。

http://blog.e-riverstyle.com/2011/01/rolewaiaria.html

wordpress初期設定

サイト表示時の上部メニュー非表示
→ユーザー設定

html特殊文字表記

アンド：&
空白： 

タイトルなどの画像置換

新しい画像置換
ではこれが、新しい画像置換です。text-indentを利用するのですが「100%」を指定してテキストを外に飛ばしあとはoverflow:hiddenで非表示にしてしまいます。

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

吹き出し消す

=embedの後ろに&iwloc=B

jquery

画像のフェード（マウスオーバー時）
hover.js

背景色のフェード（マウスオーバー時）
jquery.color.js

jQuery(function() {
jQuery('#menu-menu1 a').hover(
function(){
jQuery(this).stop().animate({backgroundColor: '#F5BCD6'},300);
},
function () {
jQuery(this).stop().animate({backgroundColor: '#ED86B5'},600);
}
);
});

wordpress カスタムメニュー表示

<?php wp_nav_menu(array('menu' => '表示させたいメニュー名')); ?>

パーマリンク設定

パーマリンク設定を投稿名に変更
固定ページのURL任意の英数字を入力
カスタムメニューは自動的に変更されている。 /%category%/%postname%/

firefoxとIEのずれ修正

div img{vertical-align:bottom;}

http://d.hatena.ne.jp/kanonji/20101122/1290409864

opacity IE 透過PNGの縁

filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;

背景に親背景の色を追加

facebook likebox

http://developers.facebook.com/docs/reference/plugins/like-box/

wordpressとfacebookの連携

http://www.d-31n.com/blog/wp-plugin/1880/

メニューリストに任意のクラスを追加

// メニューリストに任意のクラスを追加

function.phpに下記を追加

function add_nav_menu_custom_class( $sorted_menu_items ) {
$num = 1;
foreach ( $sorted_menu_items as $key => $sorted_menu_item ) {
$sorted_menu_items[$key]->classes[] = 'menu-order-' . $num;
if ( $num == 1 ) {
$sorted_menu_items[$key]->classes[] = 'tip';
} elseif ( $num == count( $sorted_menu_items ) ) {
$sorted_menu_items[$key]->classes[] = 'tip';
}
$num++;
}
return $sorted_menu_items;
}
add_filter( 'wp_nav_menu_objects', 'add_nav_menu_custom_class' );

wordpress ヘッダーのタグ整理

remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_generator' );

wordpress 抜粋関連

the_excerpt() と the_content()

http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_excerpt

wordpress 記事タイトルの表示文字数制限

http://seno.cc/archives/264

<?php
$posts = get_posts('numberposts=3&order=desc'); ?>
 <ul>
 <?php foreach($posts AS $post): ?>
<li><A href="<?php the_permalink(); ?>"">
<?php
echo mb_substr($post->post_title, 0, 17).'...'; ?>
</a>
</li> <?php endforeach; ?>
 </ul>

個別記事のヘッダーの情報

twentyeleven_posted_on

function.phpを書き換え
timeのみ

wordpress colorbox

mataタグ削除

include/jquery-colorbox-frontend.php

function renderMetaTag() {

wordpress title属性削除

プラグイン
Remove Title Attributes

修正
http://netbizknowhow.seesaa.net/article/219044628.html


preg_replace('` title="(.+)"`',
部分を下記へ

preg_replace('/ title=[\"\'](.+?)[\"\']/u',

（情報元）
　 http://blog.we-boxes.com/wordpress/remove-title-attributes-the-category-bug-fix/

カスタム投稿 サイド 月別アーカイブ

“function.php”

global $my_archives_post_type;
add_filter( 'getarchives_where', 'my_getarchives_where', 10, 2 );
function my_getarchives_where( $where, $r ) {
global $my_archives_post_type;
if ( isset($r['post_type']) ) {
$my_archives_post_type = $r['post_type'];
$where = str_replace( '\'post\'', '\'' . $r['post_type'] . '\'', $where );
} else {
$my_archives_post_type = '';
}
return $where;
}
add_filter( 'get_archives_link', 'my_get_archives_link' );
function my_get_archives_link( $link_html ) {
global $my_archives_post_type;
if ( '' != $my_archives_post_type )
$add_link .= '?post_type=' . $my_archives_post_type;
$link_html = preg_replace("/href=\'(.+)\'\s/","href='$1".$add_link."'",$link_html);

return $link_html;
}


“sidebar.php

画像ループ-jquery

http://black-flag.net/jquery/20111214-3623.html

カテゴリーごとの振り分け表示

hoge

wordpress 特定の記事表示

プライバシーポリシー

追加

ギャラリーの見せ方

http://www2.lisn.co.jp/incense_life/index.html

気づかなかった

UI design

http://itpro.nikkeibp.co.jp/article/NEWS/20120206/380228/?ST=develop&mkjb&P=3

8）コンテンツに没入させる

　新しいUIデザインが生まれている分野として同氏が注目しているのがモバイルデバイス。特にiPadには目が離せないという。同氏は、魅力的と感じたUIに共通する、二つの最近注目されているキーワードを紹介した。

　その一つが「没入感」（immersive design）。これは、UIを見せることをできるだけ避けて、コンテンツに集中させる考えである。具体的には、何かを読もうとしたときに、周囲のボタンなどではなく、テキストそのものが見えるようにすること。UIデザイナーは新しいボタンや要素を加えることが仕事と考えがちなので戒めるべきとの教えだ。

9）コンテンツの誘導は“流れる”ように


写真5●移動性に優れているとして紹介されたiPadの写真管理アプリ
[画像のクリックで拡大表示]
　もう一つのキーワードは「移動性に優れたデザイン」（fluid design）。これは、複数のコンテンツを扱う際に、その間の動きやトレーシングを残しておくという考え方を指す。

　移動性に優れたデザインが解決できる問題は二つある。一つはナビゲーション。今いる場所と、どこに行こうとしているのかをはっきりさせることである。

jquery formデザイン

http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/

css URLの折り返し

table.chart .url {
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
word-break:break-all;
word-wrap:break-word;
}

re-knows参考

http://www.outletpeak.com/

wordpress 記事内でphp実行

http://kachibito.net/wordpress/php-file-include-post.html

http://www.zasae.com/haya/2011/01/wordpress_shortcode_php_eval/

div background IE注意

backgroundがIEで表示されない
幅を指定

html5 サンプル

http://www.ecstudio.jp/

html5まとめ

http://w3g.jp/blog/studies/html5report

HTML5.jp
http://www.html5.jp/
HTML5についてのおさらい
http://w3g.jp/blog/studies/html5report
HTML5 Validator(W3C)
http://validator.w3.org/
HTML 5 Outliner
http://gsnedders.html5.org/outliner/
HTML5 enabling script
http://remysharp.com/2009/01/07/html5-enabling-script/
HTML5 のリセット・スタイルシート（HTML5 Doctor翻訳）
http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html
今からハジメるHTML5マークアップ
http://www.slideshare.net/swapskills/futomi
HTML5, きちんと。
http://www.slideshare.net/myakura/html5-2480964

html5 リセットcss

http://www.html5-memo.com/first-html5/html5-002/

IE6 透過PNG

http://www.two-hearts.net/2010/04/dd-belatedpngjsie6png.html

DD_belatedPNG_0.0.8a-min.js

jQueryで背景画像をアニメーションで無限ループ

http://www.webopixel.net/javascript/143.html

http://uetsuhara.com/articles/2011/11/background-scrolling-effect.html

透過あり
http://fx.inetcat.com/

透過あり
http://spritely.net/
http://take19x.blog38.fc2.com/blog-entry-46.html

透過あり　IE６×
http://www.susi-paku.com/pakuj-querybackgroundposition.html

wordpressコンディショナル・タグ

コンディショナル・タグを使いこなす。

コンディショナル・タグとは、if構文のような条件分岐をする際に便利なテンプレートタグです。

?php if (in_category('1')): ?>
  A
<?php elseif (in_category('2')): ?>
  B
<?php endif; ?>

ページの読み込み時にフェードイン

http://myspacekaizou.blog17.fc2.com/blog-entry-44.html

コンフリクトする場合あり
parallax ×

画像マウスオーバーフェード付

http://suzken.com/2010/10/jquery-fade-rollover.html

マウスオーバーでアニメーションするボタン５種

http://www.webopixel.net/javascript/179.html

コンテンツスライダー

jContent - jQuery Simple Content Slider Plugin

http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jcontent.html

skip-linkとは？

「skip-link、screen-reader-text」というクラス名がついた、「コンテンツへ移動」というのはスクリーンリーダーなどで、繰り返し同じメニューが読見上げられてしまう事を避けるためにつけられたリンクです。普通の状態ではテキストは隠されています。「アクセシビリティに配慮してある」、ということがいえると思います。