webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

WordPressでpathやURLを取得するためのタグと出力例まとめ（ すぐにリンクするためのメモ）

 

pathはローカルの場合は「C:\xampp\htdocs\xampp\example/」。
サーバの場合は「/var/www/html/example/」といった感じになります。

関数解説出力
ABSPATH インストールされた場所のパス C:\xampp\htdocs\xampp\example/（ローカルの場合）
/var/www/html/example/（サーバの場合）
admin_url() 管理画面のパス http://www.example.com/wp-admin/
content_url() wp-contentディレクトリのパス http://www.example.com/wp-content
get_attachment_link( $id ) 添付ファイルのIDを渡すと添付ページの URI を返す http://www.example.com/?attachment_id=$id
get_author_posts_url( $author ) 投稿者別のアーカイブページへのリンク。投稿者名を入力する http://www.example.com/?author=0
get_bloginfo( $show ) デフォルトはnameでサイト名が返ってくる。変数による違いは以下の通り。 http://localhost/xampp/example
$show = ‘admin_email’ admin@example.com
$show = ‘atom_url’ http://www.example.com/home/feed/atom
$show = ‘charset’ UTF-8
$show = ‘comments_atom_url’ http://www.example.com/home/comments/feed/atom
$show = ‘comments_rss2_url’ http://www.example.com/home/comments/feed
$show = ‘description’ Just another WordPress blog
$show = ‘home’ http://www.example.com/home (DEPRECATED! use url option instead)
$show = ‘html_type’ text/html
$show = ‘language’ en-US
$show = ‘name’ Testpilot
$show = ‘pingback_url’ http://www.example.com/home/wp/xmlrpc.php
$show = ‘rdf_url’ http://www.example.com/home/feed/rdf
$show = ‘rss2_url’ http://www.example.com/home/feed
$show = ‘rss_url’ http://www.example.com/home/feed/rss
$show = ‘siteurl’ http://www.example.com/home (DEPRECATED! use url option instead)
$show = ‘stylesheet_directory’ http://www.example.com/home/wp/wp-content/themes/largo
$show = ‘stylesheet_url’ http://www.example.com/home/wp/wp-content/themes/largo/style.css
$show = ‘template_directory’ http://www.example.com/home/wp/wp-content/themes/largo
$show = ‘template_url’ http://www.example.com/home/wp/wp-content/themes/largo
$show = ‘text_direction’ ltr
$show = ‘url’ http://www.example.com/home
$show = ‘version’ 3.5
$show = ‘wpurl’ http://www.example.com/home/wp
get_category_link( $id ) カテゴリーアーカイブページヘのリンク http://www.example.com/?cat=0
get_day_link( $year, $month, $day ) 日別アーカイブページのリンク。デフォルトは現在の日。 http://www.example.com/?m=20150313
get_edit_user_link( $user_id ) ユーザー情報編集画面用のパス http://www.example.com/wp-admin/profile.php
get_feed_link() FeedのURLを取得 http://www.example.com/?feed=rss2
get_month_link( $year, $month ) 年別アーカイブページのリンク。デフォルトは現在の年度。 http://www.example.com/?m=201503
get_page_link( $id ) 固定ページのパーマリンクを取得 http://www.example.com/?page_id=$id
get_permalink( $id ) $idを入力するとURLのスラッグを返す。パーマリンク設定によって異なる http://www.example.com/?p=$id
get_post_type_archive_link( $posttype ) カスタム投稿タイプのアーカイブページを返す。get_post_type_archive_link( get_post_type() )など http://www.example.com/$posttype
get_stylesheet() 現在適用されているテーマ（スタイルシート）のディレクトリ twentyten-child
get_stylesheet_directory() 現在適用されているテーマ（スタイルシート）のディレクトリ /var/www/html/example/wp-content/themes/twentyten-child
get_stylesheet_directory_uri() 現在適用されているテーマをURI表記で返す http://www.example.com/wp-content/themes/twentyten-child
get_stylesheet_uri() 現在適用されているテーマ（スタイルシート）のパス /var/www/html/example/wp-content/themes/twentyten-child/style.css
get_tag_link( $id ) タグアーカイブページヘのリンク。IDで指定してスラッグで返ってくる。 http://www.example.com/?tag=wordpress
get_template_directory() 親テーマのディレクトリ /var/www/html/example/wp-content/themes/twentyten
get_template_directory_uri() 親テーマのURI http://www.example.com/wp-content/themes/twentyten
get_term_link( $id ) カスタム分類アーカイブページヘのリンク。タクソノミーが無いとWP_Error Objectを返す http://www.example.com/custom-taxonomy
get_theme_root() テーマのディレクトリ /var/www/html/example/wp-content/themes
get_theme_root_uri() 親テーマのディレクトリ http://www.example.com/wp-content/themes
get_year_link( $year ) 年別アーカイブページのリンク。デフォルトは現在の年度。 http://www.example.com/?m=2015
home_url( $path, $scheme ) $pathにはホームURLからの相対パス。$schemeはhttpかhttpsもしくはrelative（相対パス） http://www.example.com/$path
includes_url() wp-includesのディレクトリを返す http://www.example.com/wp-includes/
plugin_dir_path( __FILE__ ) 現在のファイルのディレクトリを返す。pluginファイルに書けばプラグインのパスを返すが、必ずしもpluginのディレクトリを返すとは限らない /var/www/html/example/wp-content\themes\twentyten-child/
plugins_url() プラグインディレクトのパス http://www.example.com/wp-content/plugins
site_url() サイトのアドレスを表示。スラッシュは付かない http://localhost/xampp/example
the_permalink() 現在のページのパス http://www.example.com/
WP_CONTENT_DIR wp-contentディレクトリのパス /var/www/html/example/wp-content
wp_get_shortlink( $id ) 短縮URL、ショートリンクを表示する。パーマリンク設定で長いスラッグにしている場合に外部プログラムへ短いURLを渡したい場合などに使う http://www.example.com/?p=$id
WP_LANG_DIR languagesディレクトリのパス /var/www/html/example/wp-content/languages
wp_login_url() ログイン画面のパス http://www.example.com/wp-login.php
wp_logout_url() ログアウト用のパス http://www.example.com/wp-login.php?action=logout&_wpnonce=0000000000
wp_lostpassword_url() ログアウト用のパス http://www.example.com/wp-login.php?action=lostpassword
WP_PLUGIN_DIR プラグインディレクトのパス /var/www/html/example/wp-content/plugins
wp_registration_url() ユーザー登録用のパス http://www.example.com/wp-login.php?action=register
wp_upload_dir($time) アップロードディレクトリ URL。配列で返ってくる。$timeはデフォルトはnull。$time = ‘path‘ /var/www/html/example/wp-content/uploads
$time = ‘url‘ http://www.example.com/wp-content/uploads
$time = ‘subdir‘  
$time = ‘basedir‘ /var/www/html/example/wp-content/uploads
$time = ‘baseurl‘ http://www.example.com/wp-content/uploads
$time = ‘error‘ bool(false)

 

wordpress theme "asteria lite" を使ったカスタマイズ作業の段取り

画像やリンクのパスをどのように指定するのがよいのか？

1月15日に考えたこと、、、

functions.phpに関数を追加する

  • 以下のコードを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');

1月22日にあらためて考えたこと

  • phpを使って、絶対パスを読み込む方法。
  • <img src="<?php echo content_url(); ?>/themes/asteria-lite/images/######.jpg" alt=""  class="alignnone size-full wp-image-921" />のような指定方法。
  • あるいは、「theme」「asteria-lite」「images」に画像ファイルを置いて、相対パスで指定するか。
  • phpを使って絶対パスでリンクを指定する方法だと、backgroundをurlで指定するときにうまくいかない。
  • backgroundを使うこともあるだろうから、とりあえずは「images」フォルダーに画像ファイルを入れておこうと思う。

 

固定ページのテンプレートを作る

  1. 「page-」+「ページ内容が分かる名前」+「.php」つまり、page-#####.php、というファイルを作る。
  2. このファイルを、「wordpress」「wp-content」「themes」「asteria-lite」の直下に置く。
  3. 必要なページ分あらかじめ作っておく。

固定ページ用テンプレートのソースコード

  1. 冒頭は、wordpressに固定ページのテンプレートであることを宣言する記述が必要になる。（１－５行目）
  2. このテーマ（asteria-lite）のphpファイルには必ず「<?php global $asteria;?>」と記述されているので、それに準じる。
  3. ヘッダーを読み込む。

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

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

 

 ダッシュボードで入力できる部分を作る

  1. この場合以下のソースコードを、入力した内容が表示されたい個所に記述する。
  2. このソースは、asteria-liteにあらかじめ用意されている「page-fullwidth」テンプレートからコピーしてきた。

制約事項

  • ダッシュボードから追加できる箇所は、１ページにつき一か所となる。
  • クラス名の命名規則は共同で開発する場合には規定しておいた方がいい。

wordpress theme "asteria lite"

wordpress theme asteria 固定ページ

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

f:id:ohta-felica:20170114215853p:plain

 asteriaテーマフォルダの中身 

f:id:ohta-felica:20170114214246p:plain

  •  黄色い部分が固定ページのテンプレートファイル。
  • 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(); ?>

<?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 固定ページ用テンプレートを作る方法。

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

f:id:ohta-felica:20170114210509p:plain

 

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

f:id:ohta-felica:20170114210606p:plain

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

f:id:ohta-felica:20170114210653p:plain

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

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

f:id:ohta-felica:20170114211129p:plain

  •  ファイルの冒頭は「テンプレート」である宣言をしなくてはいけない。
  • 以下のように記述する。
  • <?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を教わった時から、トラブルの原因と思われた、絶対パス参照の問題に再びぶちあたった。
  • そもそも、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

 

f:id:ohta-felica:20170114131611p:plain

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

 

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');

 

 

javascript object

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(){}

}

}

 

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

jQuery append prepend

jquery append prepend before after

f:id:ohta-felica:20170109231041p:plain

 

 

before

f:id:ohta-felica:20170109231851p:plain

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

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

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

 

after

f:id:ohta-felica:20170109231931p:plain

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

 

 prepend

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

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

f:id:ohta-felica:20170109232017p:plain

 append

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

prependの反対。

f:id:ohta-felica:20170109232222p:plain

 

 

 

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

 

 

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

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

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

 

jQuery selector まとめ

jquery selector

基本形

$("     ");

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

$("li");

$("p");

$(#id);

$(".class");

$("#id li");

$(".class li");

 

pseudo selector

pseudo 擬似

f:id:ohta-felica:20170109221601p:plain

:first

:last

:odd

:even

 

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

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

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

ここは要注意。

 

 

traversing

f:id:ohta-felica:20170109221923p:plain

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

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

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

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

$(#id li).last();

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

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

 

 

f:id:ohta-felica:20170109222731p:plain

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

traversingに使えるmethod

first()

last()

next()

prev()

parent()

children()

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

 

f:id:ohta-felica:20170109223054p:plain

 

 

f:id:ohta-felica:20170109223226p:plain