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>

scriptの記述場所

• htmlのタグは基本的に上から順番に読み込まれる。
• scriptタグがheadタグ内にあり、先に処理されている時点でまだIDを持つタグが読み込まれていないと、getElementById('id');は実行されないでエラーになる。

うまくいかない

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display Date</title>
<script>
var now = new Date();
var display = document.getElementById('display');
display.textContent = now;
</script>
</head>

<body>
<p id="display"></p>

</body>
</html>

うまくいく

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>display Date</title>
</head>

<body>
<p id="display"></p>
<script>
var now = new Date();
var display = document.getElementById('display');
display.textContent = now;
</script>
</body>
</html>

PDFのファイルサイズを縮小する 02

• 引き続き、PDFのファイルサイズを縮小するための考察。
• 「最適化パネル」の「オブジェクトを破棄」が気になった。
• そこでテスト。

•  ケースによるだろうが、元のファイルがどのくらいサイズダウンできるのだろう？
• ちなみに最適化に際して、「標準」を選択したうえで、「オブジェクトを破棄」の項目をすべて選択した。
• 結果、元のファイルサイズは67612、最適化後は34403でおよそ半分になった。
• さらにほかの項目を追加してみる。

•  今度は「ユーザーデータを破棄」にすべてチェックを入れてみる。「オブジェクトの破棄」も併せて使用。
• 結果は驚きに値します！
• 67612kbの元ファイルが540kbになってしまいました。１%未満、、、
• 800%に拡大してもこの解像度。
• 今まで何を苦労していたのか、、、、という感じですね。
• PDFは周辺情報の塊なんですね。

•  で、いったい何を削除したのか？？は以下を参照。
• Acrobatヘルプ | PDF のファイルサイズを小さくする方法 （Acrobat DC）からの転載。

－ ユーザーデータを破棄パネル

配布したり他の人と共有したくない個人情報を削除できます。個人情報が見つからない場合は、非表示になっている可能性があります。「文書の検査」コマンド（ツール／墨消し／非表示情報を検索して削除）を使用して、非表示のテキストおよびユーザー関連情報を検索することができます。

• すべての注釈、フォーム、マルチメディアを破棄
  PDF からすべての注釈、フォーム、フォームフィールドおよびマルチメディアを削除します。
• 文書情報とメタデータを破棄
  文書情報辞書およびすべてのメタデータストリーム内の情報を削除します（「名前を付けて保存」コマンドを使用して、メタデータストリームを PDF のコピーに戻します）。
• すべてのオブジェクトデータを破棄
  PDF からすべてのオブジェクトを削除します。
• 添付ファイルを破棄
  注釈として PDF に追加された添付ファイルを含めて、すべての添付ファイルを削除します（PDF の最適化では、添付ファイルは最適化されません）。
• 外部相互参照を破棄
  他の文書へのリンクを削除します。PDF 内の他の場所にジャンプするリンクは削除されません。
• 他のアプリケーションのプライベートデータを破棄
  その PDF 文書を作成したアプリケーションでしか使用しない情報を文書から削除できます。これによって PDF の機能が影響を受けることなく、ファイルサイズが小さくなります。
• 非表示レイヤーの内容を破棄し、表示レイヤーを統合
  ファイルサイズを縮小できます。最適化された PDF 文書は元の PDF と同じように見えますが、レイヤー情報を含まない文書となります。