wordpress theme "asteria lite"

wordpress ページの種類と、ファイル名の関係

 asteriaテーマフォルダの中身 

•  黄色い部分が固定ページのテンプレートファイル。
• page.phpのソースコードは以下。

<?php global $asteria;?>
<?php get_header(); ?>

<!--Content-->
<div class="fixed_site">
<div class="fixed_wrap singlefx">
<?php if*1{ ?>
<div class="page_tt">
<div class="center"><h1 class="postitle"><?php the_title(); ?></h1></div>
</div>
<?php } ?>

<div id="content">
<div class="center">
<div class="single_wrap<?php if ( !is_active_sidebar( 'sidebar' ) ) { ?> no_sidebar<?php } ?>">
<div class="single_post">
<?php if(have_posts()): ?><?php while(have_posts()): ?><?php the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<?php if ( is_user_logged_in() || is_admin() ) { ?><div class="edit_wrap"><a href="<?php echo get_edit_post_link( ); ?>"><i title="<?php _e('Edit This','asteria'); ?>" class="fa-edit"></i></a></div><?php } ?>

<div class="single_post_content">
<?php if*2 { ?>
<div class="comments_template">
<?php comments_template('',true); ?>
</div>
<?php }?>
<!--COMMENT END-->
<?php endif ?>

</div>

<!--PAGE END-->

<!--SIDEBAR START-->
<?php if ( is_active_sidebar( 'sidebar' ) ) { ?><?php get_sidebar();?><?php } ?>
<!--SIDEBAR END-->
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

•  page-fullwidth.phpのソースコード

<?php
/*
Template Name: Full Width Page
*/
?>
<?php global $asteria;?>
<?php get_header(); ?>

<!--Content-->
<div class="fixed_site">
<div class="fixed_wrap singlefx">
<?php if*3: ?><?php while(have_posts()): ?><?php the_post(); ?>
<div <?php post_class(); ?> id="post-<?php the_ID(); ?>">

<?php if ( is_user_logged_in() || is_admin() ) { ?><div class="edit_wrap"><a href="<?php echo get_edit_post_link( ); ?>"><i title="<?php _e('Edit This','asteria'); ?>" class="fa-edit"></i></a></div><?php } ?>

<div class="single_post_content">
<?php if*4 { ?>
<div class="comments_template">
<?php comments_template('',true); ?>
</div>
<?php }?>
<!--COMMENT END-->
<?php endif ?>

</div>

<!--PAGE END-->
</div>
</div>
</div>
</div>
<?php get_footer(); ?>

•  style.cssの共通部分

body{ background:#f7f7f7; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#999;}
.center{ margin:0 auto; width:85%;}
a{ text-decoration:none;}
p, .widget_wrap{line-height: 26px;}

/*Full width pages*/
body .no_sidebar{ width:100%;}

*1:$asteria['page_type_id']) == '1' || !get_option( 'asteria'

*2:$asteria['page_type_id']) == '2'){ ?><h1 class="postitle"><?php the_title(); ?></h1><?php } ?>

<div class="thn_post_wrap"><?php the_content(); ?> </div>
<div style="clear:both"></div>
<div class="thn_post_wrap"><?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?></div>
</div>
</div>
<?php endwhile ?>
</div>
<!--COMMENT START: Calling the Comment Section. If you want to hide comments from your posts, remove the line below-->
<?php if (!empty ($asteria['post_comments_id']) || !get_option( 'asteria'

*3:$asteria['page_type_id']) == '1'){ ?>
<div class="page_tt">
<div class="center"><h1 class="postitle"><?php the_title(); ?></h1></div>
</div>
<?php } ?>

<div id="content">
<div class="center">
<div class="single_wrap no_sidebar">
<div class="single_post">
<?php if(have_posts(

*4:$asteria['page_type_id']) == '2'){ ?><h1 class="postitle"><?php the_title(); ?></h1><?php } ?>
<div class="thn_post_wrap"><?php the_content(); ?> </div>
<div style="clear:both"></div>
<div class="thn_post_wrap"><?php wp_link_pages('<p class="pages"><strong>'.__('Pages:').'</strong> ', '</p>', 'number'); ?></div>


</div>



</div>
<?php endwhile ?>
</div>
<!--COMMENT START: Calling the Comment Section. If you want to hide comments from your posts, remove the line below-->
<?php if (!empty ($asteria['post_comments_id']

wordpress 固定ページ用テンプレートを作る方法。

•  固定ページを新規で追加する。

•  このときにプルダウンメニューで表示されるようなテンプレートの作り方。

ファイルの格納場所と、ファイル名について。

• 例えばaccessのページであれば、page-access.php
• profileのページであれば、page-profile.php
• このように、「page-#####.php」とする。
• ファイル名の接頭辞に「page-」をつければよい。
• こうして作ったファイルを、「wordpress」「wp-content」「theme」「テーマ名のフォルダ」の直下に置く。

•  ファイルの冒頭は「テンプレート」である宣言をしなくてはいけない。
• 以下のように記述する。
• <?php
  /*
  Template Name: #####
  */
  ?>
• 現在制作に使っている「asteria」というテーマは、どのページも「<?php global $asteria;?>」から始まっているので、以下のようになる。

<?php
/*
Template Name: #####
*/
?>

<?php global $asteria;?>
<?php get_header(); ?>

•  これに引き続いてページのコードを書いていく。
• そして、ソースの最後は、<?php get_footer(); ?>

 こうしておけば。固定ページのテンプレートメニューに表示される。

wordpress absolute URLs

• 既存のwordpressサイトの見栄えを含めた改修作業をすることになって、授業でwordpressを教わった時から、トラブルの原因と思われた、絶対パス参照の問題に再びぶちあたった。
• そもそも、wordpressの開発者が意図してそのような設計にしているのだから、その意図を探りたくなる。
• そこで、、、

https://core.trac.wordpress.org/ticket/17048

wordpress コア開発チームのやり取り

Description

Using absolute URLs are needed for email, and maybe RSS, and RPC.

For normal pages on a fresh install (default theme):

-Using absolute URLs like "http://domain.tld/path/file" (current behavior) breaks css and links if the server uses more then one domain/ip

-Using relative URLs like "../path/file" would likely break a lot and make WordPress unnecessarily complicated.

-Using root-relative URLs like "/path/file" is the correct design decision maximizing compatibility/functionality.

• 絶対パスはRSSなど、いくつかの箇所で必ず必要になってくる。
• 複数のドメイン/IPを使用しているサーバーで、絶対パスを使用するとCSSやリンクが切れる。
• 「../path/file」 のような相対パスはより多くのリンク切れを起こすだろうし、ワードプレスの構造が不必要に複雑する。
• 互換性/機能性を最大化するのであれば、 「/path/file」 のようなルートパスを採用するのがよい。

上の提案に対して、、、

Root-relative URLs aren't really proper. /path/ might not be WordPress, it might be outside of the install. So really it's not much different than an absolute URL.

Any relative URLs also make it significantly more difficult to perform transformations when the install is moved. The find-replace is going to be necessary in most situations, and having an absolute URL is ironically more portable for those reasons.

As you said, absolute URLs are needed in numerous other places. Needing to add these in conditionally will add to processing, as well as introduce potential bugs (and incompatibilities with plugins).

Unfortunately, the opinion of those threads are skewed in the direction you mention due to most of them not really understanding the problem or the design decision (nor are most of them active core contributors or core developers). I've tried to cover a bit of the design decision on wp-hackers before, and I've been able to locate this reply of mine (the first part, in particular):

http://lists.automattic.com/pipermail/wp-hackers/2010-November/036195.html

•  ルートパスにしても、ワードプレスの外部を参照するのであれば、絶対参照とそんなに変わらないじゃない、、、
• ワードプレスの移転に際して、皮肉なことにルートパスや相対パスよりも、絶対パスの書き換えの方が容易なケースが多いのかも、、、
• 絶対参照が必要な部分は必ずあるので、条件付きで絶対参照する箇所があると、プロセスの負荷（オーバーヘッド）になったり、バグの原因となりやすい。

Why relative URLs should be forbidden for web developers • Yoast Dev Blog

以下のサイトで勉強させてもらいました。 

WordPress のURLはなぜ相対パスでなく絶対パスが用いられるのか - Lowaivill Tech Blog 

とはいえ、、、

参考として絶対パスを相対パスへ変換するコードを以下に紹介しておきます。
以下のコードを functions.php に追記するだけです。

とのことです。ちょっと試してみます。

function delete_host_from_attachment_url($url) {

  $regex = '/^http(s)?:\/\/[^\/\s]+(.*)$/';

  if (preg_match($regex, $url, $m)) {

    $url = $m[2];

  }

  return $url;

}

add_filter('wp_get_attachment_url', 'delete_host_from_attachment_url');

add_filter('attachment_link', 'delete_host_from_attachment_url');

illsutrator 文字パネル初期設定

javascript object

オブジェクトリテラルは、「2つのcurly brackets」で囲まれ、その中に「name」と「value」のペアが列挙されたもの。commaでつなげる。

• nameはalphabet, number, underscoreを使用する。
• 使用していない場合、および予約語を使用する場合は、doublequotation で囲む。

• valueには任意の式を記述することもできる。
• valueには他のオブジェクトリテラルを記述することもできる。つまりオブジェクトはネストすることができる。

var emptyObject = {　};

新しいオブジェクトを生成する。

var object = {

//propertyや

property1 : 'string' ,

property2 : 'string' ,

//methodや

method1 : function aa (){},

method2 : function bb (){},

//objectを記述できる。

object : {

property3 : 'string',

method3 : function cc(){}

}

}

すべてのオブジェクトは、プロトタイプオブジェクトとリンクしていて、そこからプロパティーを継承している。

DOM, node について

DOM

document object model

documentのツリー構造そのものなのか？

node

DOMツリーにぶら下がっているオーナメント。

それぞれのHTML要素。

nodeとは瘤のこと。

jQuery append prepend

before

リファレンスするのは「.vacation」。

このクラスの要素に対して前に配置する、これがbefore。

「.vacation」との繋がりはない。（関係性がない）

after

beforeの反対。これも関係性はない。

 prepend

「first child」として追加する。

「.vacation」との関係性がある。一番目の子要素として追加するということ。

 append

「last child」として追加する。

prependの反対。

これら４つの操作に対する対義語はremove、取り除くこと。

ある要素に対してクラスを追加して、いままでのクラスを取り除くといった具合です。

remove();して、append();する。

remove();して、prepend();する。などなど、、、

jQuery selector まとめ

基本形

$("     ");

これさえ知っていればあとはCSSと同じ。

$("li");

$("p");

$(#id);

$(".class");

$("#id li");

$(".class li");

pseudo selector

pseudo 擬似

:first

:last

:odd

:even

liのindexは、先頭が「０」（配列と同じ）

ゆえにeven（偶数）、は先頭、3番目、、、、となる

同様にodd(奇数) 、は実際には偶数番目になる。

ここは要注意。

traversing

 例えば「#id」の「li」要素を選択するときに、いくつかの方法がある。

通常セレクタを使う場合は、$("#id li");とすればよい。

traversingを使って指定する場合は、

$("#id").find("li");となる。

$(#id li).last();

$(#id).last("li");ではない。なぜか？？

#id liのlast()を見つけるからでしょう。

 traversingはmethod();を使用して特定の要素をピックアップする方法。

traversingに使えるmethod

first()

last()

next()

prev()

parent()

children()

など。これらのメソッドを連続して使うこともできる。（method chaining）

アコーディオンメニュー js

function showHide() {
var para1 = document.getElementById('news1Paragraph');
var para2 = document.getElementById('news2Paragraph');

para1.style.display = 'block';
para2.style.display = 'none';

var title1 = document.getElementById('news1Title');
var title2 = document.getElementById('news2Title');

title1.onclick = function () {
para1.style.display = 'block';
para2.style.display = 'none';
};

title2.onclick = function () {
para1.style.display = 'none';
para2.style.display = 'block';
};

}

document.ready = showHide();

• ローカル変数を使うように意識する。
• DOMは変数にして使いまわす。（負荷が大きいため）
• DOMを使うときは、ソースの読み込みをbodyの閉じtagの直前にする。

 HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOM display</title>
<link rel="stylesheet" href="style.css">

</head>

<body>
<div id="whatsnew">
<h1><img src="images/whatsnew.png" alt="最新情報"></h1>

<div class="section first">
<h2 id="news1Title">方丈記<br>【ゆく河の流れ】</h2>

<p id="news1Paragraph">ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮ぶうたかたは、かつ消え､かつ結びて、久しくとどまりたる例(ためし)なし。世の中にある人と､栖(すみか)とまたかくのごとし。<br>
たましきの都のうちに、棟を並べ､甍（いらか)を争へる、高き､いやしき、人の住ひは、世々を経て尽きせぬものなれど、これをまことかと尋ねれば、昔ありし家は稀(まれ)なり。或は去年(こぞ)焼けて、今年作れり。或は大家(おほいへ)亡びて小家(こいへ)となる。住む人もこれに同じ｡所も変らず､人も多かれど、いにしへ見し人は､二三十人が中(うち)に、わづかにひとりふたりなり。朝(あした)に死に､夕(ゆふべ)に生るるならひ、ただ水の泡にぞ似たりける。<br>
知らず､生れ死ぬる人､何方(いずかた)より来たりて、何方へか去る。また知らず､仮の宿り、誰(た)が為にか心を悩まし、何によりてか目を喜ばしむる。その主と栖と、無常を争ふさま、いはばあさがほの露に異ならず。或は露落ちて花残れり。残るといへども朝日に枯れぬ。或は花しぼみて露なほ消えず｡消えずといへども夕を待つ事なし。</p>
</div><!--section first-->

<div class="section second">
<h2 id="news2Title">方丈記<br>【安元の大火】</h2>

<p id="news2Paragraph">予（われ）、ものの心を知れりしより、四十（よそぢ）あまりの春秋（しゅんじう）をおくれるあひだに、世の不思議を見る事ややたびたびになりぬ。<br>
去（いんし）、安元三年四月（うづき）廿八日かとよ。風烈（はげ）しく吹きて、静かならざりし夜､戌（いぬ）の時（とき）許（ばかり）、都の東南（たつみ）より火出で来て、西北（いぬゐ）に至る。はてには朱雀門・大極殿・大学寮・民部省などまで移りて、一夜のうちに塵灰（ちりはい）となりにき。<br>
火（ほ）もとは、樋口富（ひぐちとみ）の小路（こうじ）とかや。舞人（まひびと）を宿せる仮屋より出で来たりけるとなん。咲き迷ふ風に、とかく移りゆくほどに、扇（あふぎ）をひろげたるがごとく末広になりぬ。遠き家は煙（けぶり）に咽（むせ）び、近きあたりはひたすら焔（ほのほ）を地に吹きつけたり。空には灰を吹き立てたれば、火の光に映じて、あまねく紅（くれなゐ）なる中に､風に堪へず、吹き切られたる焔、飛ぶが如くして一二町を越えつつ移りゆく。その中の人､現（うつ）し心あらむや。或（あるい）は煙に咽びて倒れ伏し、或は焔にまぐれてたちまちに死ぬ｡或は身ひとつ、からうじて逃るるも、資財を取り出づるに及ばず。七珍万宝さながら灰燼（くわいじん）となりにき。その費え、いくそばくぞ。そのたび、公卿の家十六焼けたり。ましてその外、数へ知るに及ばず｡惣（すべ）て都のうち、三分が一に及べりとぞ。男女死ぬるもの数十人、馬・牛のたぐひ辺際を知らず｡<br>
人の営み､皆愚かなるなかに、さしも危ふき京中の家をつくるとて、宝を費し、心を悩ます事は、すぐれてあぢきなくぞ侍る。</p>
</div><!--section2-->
</div><!--whatsnew-->
<script src="script.js"></script>
</body>
</html>

 

CSS

@charset "utf-8";
/* CSS Document */

/*reset
--------------------------------*/
h1, h2, h3, p{
margin: 0;
padding: 0;
line-height: 1.5;
height: auto;
}
#whatsnew{
width: 398px;
margin: 0 auto;
}
#whatsnew h1{
margin-bottom:20px;
}

/*sectionbox
--------------------------*/
.section{
border: 3px solid #999999;
}
.section h2{
background:url(images/2.png) no-repeat left 0 top 5px;
font-size: 16px;
border-bottom: 1px solid #777777;
padding-left: 45px;
color: #4872F7;
}
.section p{
padding:16px;
}

Date(); の復習 / 日付の表示

<body>
<h1 id="now" style="color: red; textalign: center; margin: 0 auto; width: 600px;"></h1>

<script>
function now(){
now = new Date();
year = now.getFullYear()+'年';
month = (now.getMonth()+1)+'月';
date = now.getDate()+'日';
hours = now.getHours()+'時';
minutes = now.getMinutes()+'分';
seconds = now.getSeconds()+'秒';
day = new Array('日曜日',' 月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日');
jpDay = day[now.getDay()];
document.getElementById('now').textContent = year+month+date+hours+minutes+seconds+jpDay;
}
now();
</script>