2016.05.15
2844文字 / 読了時間:3.6分程度
web/design/css/php/js..

新WordPressテーマ「Ateh’s theme-N(News)」を昨日つくってちまちまいじっていたり。

Ateh’s theme-N(News)

DOWNLOAD

いろいろ調べたのでそのメモとか。

ワードプレステーマのディレクトリ?

「functions.php」内で、「file_get_contents」で外部ファイルを読み込みたいこともあるわけだけれど。

ただ、「$txt = file_get_contents($url);」だとうまく動かなくて行き詰まったりとか。

(動かない)

    $url="gaibufairu.txt";
    $txt = file_get_contents($url);

で、フルパスにすればいいのかなあと思って、テンプレート(テーマ)のディレクトリを表示するのはどうすればいいのかと調べた結果、「TEMPLATEPATH」でよさそうなことがわかったり。

てことで、それを使って書き直すとこう。

(動いた)

    $url=TEMPLATEPATH."/gaibufairu.txt";
    $txt = file_get_contents($url);

外部ファイルを使う必要性?

外部ファイルをわざわざ作るのは、「functions.php」を直接書換えるカスタマイズはできるかぎり減らした方がいいんじゃないかなあということで。

「include」は「TEMPLATEPATH」使わなくても動くけど

それにしても、includeの場合だと「TEMPLATEPATH」使わなくてもちゃんと動いているからややこしいとも。

(動く)

include("gaibufairu.php");

まあincludeが楽にできたのは良かったけれど(functions.phpのおまけ的機能は別ファイルに分けると停止が簡単)、「include」はよくて「file_get_contents」はだめなのかあというところがよくわからない。

まあ別に趣味でやっていることなので、最低限の知識とコピペの組み合わせでどこまでできるかが重要だと思っているから深く考えなくてもいい(というか不可能)んだけれど。

外部ファイルを読み込んでランダム表示機能

外部ファイルを読み込んでランダム表示機能――これはサイトのデザインにランダム要素を取り入れる時にかなり応用がきく感じ。

個人的に、昔からサイトやブログのカスタマイズといえばランダム表示(テキストや画像)の追加だったから、この機能は重要。

JavaScriptとかいろいろやり方はあるけれど、functions.phpでショートコードを設定して「echo do_shortcode(‘[ショートコード名]’);」で表示させるのを今回やってみたかったのでやってみたり。

てことでこんな感じ。

●テンプレート内の表示させる箇所

<?php echo do_shortcode('[ショートコード名]'); ?>
●ショートコード設定(functions.php)

function 関数名($atts) {

    $url=TEMPLATEPATH."/gaibufairu.txt";//外部ファイルに読み込む画像ファイルフルパスを記入
    //ファイルを読み込む
    $txt = file_get_contents($url);

    $ar = explode("\n",$txt);
    shuffle($ar); 

    $img=$ar[0];

//(ファイルの一行をランダムに表示)


    $tag0="<div class='centering'>";       
    $tag1="<span style=";
    $tag2='"text-align:center; background-image:url(';
    $tag3=$img;
    $tag4=')" class="themeimage1 imgfilter" ></span>';
    //imgfilter(セピア等)不要の場合
    //$tag4=')" class="themeimage1" ></span>';
    $tag5="</div>";      
    $themeimg_rnd1=$tag0.$tag1.$tag2.$tag3.$tag4.$tag5;        

    return $themeimg_rnd1;
}
//ショートコード設定 add_shortcode('ショートコード名', '関数');
add_shortcode('ショートコード名', '関数名');
//[ショートコード名]

画像表示にimgタグじゃないのを使っているのでややこしいけれど、とりあえずこんな。

<div class='centering'>
<span style="text-align:center; background-image:url('アドレス')" class="themeimage1 imgfilter" ></span>
</div>

このやり方だと楽に丸に切り抜いたりできるので気にいってたり。

ランダム画像表示(カスタマイズ)の使う場所?

インデックスページのトップのヘッダ画像(ヒーローイメージとかいったりするあれ)は、一番カスタマイズされることが多いんじゃないかなとか。

てことで、ここをカスタマイズすることを一番最初に想定していたり。

ショートコードにする理由?

テンプレートには直にショートコードは使えないし(だからdo_shortcode使ってる)、そのまま直接書いてもよかったけれど。

ただ、ショートコード(あるいはユーザ関数)にしておくと使い回しが楽なのは確か。

で、ショートコードにしておけば、記事内でも使うことができる。

たとえばこんな感じ。

[random_theme_img1]

[random_theme_img2]

表示する画像はサンプル用。

セピアがうざい場合はセピアなしのショートコードも作るかな。

作ってみた。

[random_theme_img3]

[random_theme_img4]

丸と四角と2種類作ったし、まあデザイン的にはこれだけあればいいんじゃないかなとか。

まとめ

とりあえず今回はこんな感じ。

記事の下の飾りに使っている画像もカスタマイズできるようにはしておくかなあ。

おわり。









Comment



CAPTCHA




Memo.Medamayaki

三国志他歴史、小説、ゲーム等に関するメモ用ブログ。

TEMPLATE:Ateh's theme

×

Status


苗字:
名前:
性別:
年齢:
通り名:
出身:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:

Setting

苗字:
名前:
性別:
年齢:
通り名:
出身地:
誕生月:
誕生日:
職業:
種族:
武器:
属性:
髪色:
目色:
口癖:





× 
×

Recent Posts

×

Custom Menu