ラベル web制作 の投稿を表示しています。 すべての投稿を表示
ラベル web制作 の投稿を表示しています。 すべての投稿を表示

2011年1月7日金曜日

Wordpressでテンプレートフォルダまでのアドレスを表示するテンプレートタグ

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

wgetで動的ページを静的ページに変換してダウンロード

WordPress等の動的CMSで作成されたサイトを、静的ページに変換して、ローカル上でも確認できるようにします。

サーバ移転等で、CMS移行期間が短く、なんらかの原因でデータベースのエクスポートが出来なくなった場合に有効。

ダウンロードした静的ページを公開しておいて、その間にCMSの構築のし直しができます。

当初、WebBox等のサイト丸ごとダウンロードツールを試しましたが、正常にダウンロード出来ず、リンクも滅茶苦茶になってしまいました。

その結果、wgetでダウンロードする方法を見つけました。
※参考ページは下記↓

■ダウンロード手順
●前段階
LinuxやMacであればwgetを使えるので問題ありませんが、Windowsの場合はwgetコマンドは利用できません。
そこで、Windows版wgetコマンドがありますので、下記のサイトからダウンロード、インストールします。
※セットアップファイル(exe)版でインストールすると、楽です。

1.GNU Winをダウンロード
2.セットアップ
3.コマンドプロンプトを開き、『C:\Program Files\GnuWin32\bin』まで移動
4.下記のコマンドを打ち込む

wget --mirror --convert-links --restrict-file-names=windows
 --html-extension http://xxxxxxxx

■パラメータ説明
--mirror・・・ミラーサイトを作成
--convert-links・・・ダウンロードしたhtml中のリンクをローカルに変更する。
--restrict-file-names=windows・・・windowsのファイル名として使えない文字を変更する
--html-extention・・・最後に拡張子htmlを付加する。

5.『C:\Program Files\GnuWin32\bin』以下にドメイン名でフォルダができ、データが保存されていきます。

6.保存されたファイルを確認します。

◆参考サイト
GnuWin
http://gnuwin32.sourceforge.net/install.html

CMSのサイトを静的ファイルにバックアップする方法 - BBMaxi.com
http://bbmaxi.com/2009/04/219.html

wget全オプション日本語訳 - なまけものになりたくて
http://namakemono.6.ql.bz/web/index.php?a=memo&b=wgetAllOptions

2010年12月6日月曜日

[ECCUBE]管理者パスワードを紛失してしまった場合

利用ECCUBEバージョン : 2.4.1
利用データベース:MySQL5.1

1.FTP等で/data/class/pages/admin/LC_Page_Admin_Login.php をダウンロード
2.LC_Page_Admin_Login.phpの102行目あたりに、
$ret = sha1($_POST['password'] . ":" . AUTH_MAGIC);
という記載があるので、
$ret = sha1($5ea750590c0fb2c41cb4af8c22b3c80a3e233d4f . ":" . AUTH_MAGIC);
と書き換え。
3.phpmyadmin等でデータベースにログイン
4.dtb_member のlogin_id admin のパスワードを5ea750590c0fb2c41cb4af8c22b3c80a3e233d4f に変更

これで、パスワードが『eccube』に変更になりましたので、管理画面からユーザー名とパスワードを入力してアクセスできます。

◆参考サイト
ECCBEフォーラム
http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=3919&forum=2

ECCUBEメモ
http://seasoft.jp1.cx/ec/tips/adminpassword

Googleの検索データベースにサイトデータが登録されているかを確認

Googleの検索窓に
site://www.exsample.com/
と入力して検索。

検索結果が表示されれば、そのページがインデックスされている。

ちなみに、Yahooでも、同じように確認可能。

301リダイレクト

サーバ引越し時にリダイレクトして新しいURLへ移動する方法です。

■クライアントサイドリダイレクト

HTMLファイルのmetaタグに設定してリダイレクトする方法

<META HTTP-EQUIV="Refresh" CONTENT="5; URL=http://~">

HTTP-EQUIV="Refresh"・・・リダイレクト指定

CONTENT="5; URL=http://www.exsample.com"・・・5秒後に、http://www.exsample.comへリダイレクト

 

■サーバサイドリダイレクト

htaccessに記述する方法。(htaccessが許可されていないと不可能)

▼ドメインにアクセスされた時にリダイレクト

Redirect permanent / http://exsample.com/

▼ディレクトリにアクセスされた時にリダイレクト

Redirect permanent /company/index.html http://www.exsample.com/company

▼ファイルにアクセスされた時にリダイレクト

Redirect permanent /company/index.html http://www.exsample.com/company

 

◆参考サイト

無料SEO対策のススメ

http://www.seo-blogs.biz/2009/09/07/729/

2010年12月3日金曜日

[WordPress]FlexibleUploadの日本語化(?)

WordPressのファイルアップロード機能をパワーアップしてくれるプラグイン、『FlexibleUpload』の日本語化方法です。

1.『languages』フォルダ内の『fup-ja_UTF.mo』ファイルを
  『fup-ja.mo』へリネーム
2.プラグインをアップロード
3.プラグインを有効化

以上です。

2010年12月2日木曜日

WordPressで、他のテンプレート(php)をインクルードする

<?php include (TEMPLATEPATH . '/xxx.php'); ?>

↑/xxx.php が、読み込むファイル名

[スタイルシート]箇条書きliを番号付きにする

ブラウザのスタイルシートリセットをしたりすると、olの番号が消えてしまっていたりするので、これを復活させたい。



■スタイルシート側の記述は以下。


ol li { list-style-type: decimal; }



■HTML側は以下。


<ol>

<li>箇条書き1</li>

<li>箇条書き2</li>

<li>箇条書き3</li>

</ol>



■実際の表示は以下。
  1. 箇条書き1
  2. 箇条書き2
  3. 箇条書き3

2010年11月29日月曜日

[WordPress]コメント欄にある『利用できるHTMLタグ』を表示されないようにする

WordPressの詳細ページ(single.php)において、コメント欄の利用出来るHTMLの表示を消す。

まず、編集対象となるファイルは、下記のファイル。
wp-includes/comment-template.php

ただし、今回はスタイルシート記述を変更するだけなので、
CSSに記載しちゃっても良い。

利用出来るHTMLが記載されている箇所は、『form-allowed-tags』というクラスが付いているので、
それのスタイルを変更する

.form-allowed-tags{display:none;}


他にも方法はあるようですが、一番楽な方法を選びました。

HTMLでクリックでメールソフト起動して送信する

セキュリティ的には良くないですが、必要になったので、メモ。

リンクをクリックすると、メールソフトが起動するHTML
aタグのhref属性内にmailto:と記述することで表示可能。
各属性を記載することで、あらかじめ件名や本文を表示するようにできる。

▼サンプル
リンク

▼属性
mailto:・・・送信先メールアドレス
subject・・・件名
body・・・・本文

?・・・メールアドレスに続く属性を表記するために記載
&・・・件名から本文は、&でつなぐ

2010年11月27日土曜日

htaccessで各種モバイルをリダイレクト

ドメインにアクセスすると、機種に応じたアドレスへリダイレクトしてくれるhtaccessの書き方。

例えば、http://exsample.com/ へiPhoneでアクセスするとiPhone用のサイト(http://exsample.com/ip/)へ、Docomoの携帯でアクセスすると携帯サイト(http://exsample.com/mobile/)へ、それ以外はPCサイト(http://exsample.com/)へ飛ぶようにする・・・等

PHPで飛ばす方法もアリですが、すでにルート直下にCMSをインストール済みで、index.phpを使ってしまってたので、htaccessで飛ばすことに。

■以下、htaccess用のソース。


RewriteEngine On

RewriteCond %{HTTP_USER_AGENT} DoCoMo
RewriteRule ^$ /mobile/ [R,L]

RewriteCond %{HTTP_USER_AGENT} J-PHONE
RewriteRule ^$ /mobile/ [R,L]

RewriteCond %{HTTP_USER_AGENT} Vodafone
RewriteRule ^$ /mobile/ [R,L]

RewriteCond %{HTTP_USER_AGENT} KDDI
RewriteRule ^$ /mobile/ [R,L]

RewriteCond %{HTTP_USER_AGENT} DDIPOKET
RewriteRule ^$ /mobile/ [R,L]

RewriteCond %{HTTP_USER_AGENT} iPod
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteRule ^$ /mobile/ [R]

RewriteCond %{HTTP_USER_AGENT} ^UP.Browser
RewriteRule ^$ /mobile/ [R,L]

RewriteCond %{HTTP_USER_AGENT} SoftBank
RewriteRule ^$ /mobile/ [R,L]

2010年11月23日火曜日

Webページ制作の際、IEのみレイアウトが崩れる時

Webページを作成後、HTMLやスタイルシートの記述にエラーが無いにも関わらず、IEのみレイアウトが崩れる場合があります。その時は、作成したHTMLファイルやスタイルシートファイルの文字コードを変更してみてください。
サーバの文字コード、HTMLのヘッダーで指定している文字コード、ファイル自体の文字コードの3ファイルが同じコードでなければ、文字化けを起こします。
モダンブラウザなら自動認識してくれますが、IEの6や7は、自動認識してくれませんので、日本が文字化けした時に、周りのHTMLタグも巻き込んで壊れてしまうようです。

IE、おそるべし・・・。

ちなみに、ファイル自体の文字コードを変更するには、エディタで開き(Windows標準のメモ帳ではダメ)、文字コードを指定してから保存してください。

2010年11月22日月曜日

クリックして新たな情報を表示するJavaScript

特定の場所をクリックすると、下部に情報を表示させるJavaScriptです。

■JavaScriptソースはこちら

<script type="text/javascript">

if (typeof jp == "undefined") {

var jp = {};

}

if (typeof jp.rinco == "undefined") {

cv = {};

}

</script>

<script type="text/javascript">

cv.display = function(id) {

var target = document.getElementById(id);

if (target.style.visibility == 'hidden') {

target.style.visibility = 'visible';

target.style.display = 'block';

} else {

target.style.visibility='hidden';

target.style.display = 'none';

}

}

</script>

■HTMLソースはこちら

<div

style="background-color:blue;

color:white; padding:4px"

onclick="jp.rinco.display('down');">

ここをクリックで内容表示

</div>

<div id="down"

style="visibility:hidden; display:none;

background-color: #E8F3FF; padding:4px">

表示される内容!<br />

表示される内容!

</div>

2010年11月19日金曜日

縦長のWebページのスクリーンショットを撮りたい!

Webの提案や、制作過程の報告をするときに、ページのスクリーンショットを撮る必要が出てきます。

通常、Windows標準機能のスクリーンショットでは、画面に表示されている部分しかコピーできないので、縦長のページはすべて画像にすることができず、分割でコピーを撮り、フォトショップ等でつなげていました。

しかし、Screen grab! というFireFoxのアドオンを使えば、2クリックでスクリーンショットが撮れてしまいました。
これは便利!

▼Screen grab!の日本語版を配付して頂いているサイトさん
http://coxcafe.net/download-of-firefox-extensions/screen-grab/

→ 公式はこちら

カラムの高さを指定するJavaScript

1.ソースファイルをダウンロード

下記のサイトからJSファイルをダウンロードします。

▼to-R

http://blog.webcreativepark.net/2007/07/26-010338.html

2.ヘッダーに記述(jsフォルダの中にソースファイルを入れる場合)

<script src="js/heightLine.js" type="text/javascript"></script>

3.揃えたいカラムにclassを定義

▼タグに記載する要素

class="heightLine"

▼例

※id=contentsとid=sidemenuのカラムの高さを揃えたい場合

<div class="heightLine" id="contents">

・

・

・

</div>

 

<div class="heightLine" id="sidemenu">

・

・

・

</div>

4.完了

以上の手順で高さをそろえることができます。

ただし、JavaScriptを使っていますので、

ブラウザのJavaScriptの設定がOFFになっていると設定が外れてしまいます。

2010年11月18日木曜日

WordPressのプラグイン・PageNaviでエラー

WordPressにYahooのキーワード検索時に現れる、ページ送りの機能を実現してくれるプラグイン、『PageNavi』を使い、2P以降を表示しようとすると、ページが表示されないエラーが起こった。

この時のWPの環境は、初めにサーバ上にフォルダを作り、その中にWPをインストールして、表示も同フォルダ内でしていました。
しかし、実際に公開する時は、1つ上の階層でアクセスできるようにしたかったので、htaccessファイルやWPの設定を変更して、WPのインストールディレクトリと表示ディレクトリを分けていたのです。

ところが、グローバルナビゲーションのリンク指定が絶対パスで指定してあったため、インストールフォルダ内のデータにアクセスするようになっていたのです。

各ページを表示する分には問題ありませんでしたが、PageNaviは、表示フォルダの方しか見てくれていないようで、エラーを起こしていたようです。

グローバルナビゲーションの方の絶対パスを表示フォルダ側に変更してあげたら、問題なく動作しました。

2010年11月17日水曜日

WordPressでQ&Aっぽいページを作る

WordPressでよくある質問みたいなページを構築してみました。
よくある質問のページがどういうものかと言うと、

1.画面上に質問の箇条書きがあり、
2.質問をクリックすると、画面下部にある答えにアンカージャンプする。

という感じ。


■仕様
投稿のタイトルが質問となり、
本文が答え。
カテゴリーは、『よくある質問』というカテゴリーを作り、その中に投稿をすべて登録していく。

■カテゴリーソース
※ちなみに、『よくある質問』のカテゴリーIDを3、
  質問掲載限度数は99とします。


<?php $posts = get_posts('numberposts=99&category=3');
foreach($posts as $post) :
setup_postdata($post); ??>

<ul?>
<li?><a href="#<?php the_ID(); ??>"?><?php the_title(); ??></a?></li?>
</ul?>

<?php endforeach; ??>

<p class="clear"?> </p?>


<?php if (have_posts()) : while (have_posts()) : the_post(); ??>

<h3 id="<?php the_ID(); ??>"?><?php the_title(); ??></h3?>
<?php the_content(); ??>
<hr size="1" color="#CCCCCC" /?>
<p?> </p?>
<p?> </p?>

<?php endwhile; ??>


■解説メモ

<?php $posts = get_posts('numberposts=99&category=3');
foreach($posts as $post) :
setup_postdata($post); ??>

<ul?>
<li?><a href="#<?php the_ID(); ??>"?><?php the_title(); ??></a?></li?>
</ul?>

<?php endforeach; ??>


↑ここは、『カテゴリーID3に所属する投稿タイトルを最大99個まで箇条書きで表示する』となります。
『<?php the_ID(); ??>』は、投稿IDを取得するタグです。
この時点ではループしていません。


<?php if (have_posts()) : while (have_posts()) : the_post(); ??>

<h3 id="<?php the_ID(); ??>"?><?php the_title(); ??></h3?>
<?php the_content(); ??>
<hr size="1" color="#CCCCCC" /?>
<p?> </p?>
<p?> </p?>

<?php endwhile; ??>


↑続いて、投稿のタイトルと本文を表示する設定です。

2010年11月13日土曜日

mov→flvの動画コンバート→Web上に掲載

1.mov → flvへコンバート
まずはmov形式のファイルをflvファイルへコンバートします。

コンバートには、『Video Converter for Any Flv Player』というソフトを使用しました。

→ Video Converter for Any Flv Playerのダウンロードページらしき場所

まずは、『Add Video』で、変換したい動画を選択。

続いて、右のメニューから、変換形式を選択します。
今回は、FLVにしたいので、FLVを選択します。

ここで、ビデオサイズを変えることができます。

最後に[Start Encorde]ボタンをクリックすると、エンコードが始まります。

2.FlashPlayer導入

まず、出来た動画ファイルをWeb上へアップロードします。

続いて、Web上でYoutubeのように、再生、一時停止、ボリューム、シークバー付きで表示します。

※ここで、Playerをダウンロードして、設定してやる作業なのですが、
以前使っていたPlayerのダウンロード先と設定方法を忘れてしまったので、
省略します。Player自体は様々ありますので、探してみるのも良いかと。

▼一番有名そう(?)なJW Player
http://www.longtailvideo.com/players/jw-flv-player/

3.Webへ掲載

動画ファイルとPlayerをアップロード

Webページに、以下のコードを貼る。

2010年11月10日水曜日

WordPressでパーマリンク設定

WordPressで、URLの形式を、
ドメイン/カテゴリー名/記事ID
の順にする場合
WordPressの管理画面へログインし、[設定]→[パーマリンク設定]と進む。

『一般的な設定』にて、[カスタム構造]にチェック
/%category%/%post_id%/
と入力。

また、
ドメイン/カテゴリー名/記事名
にする場合は、
/%category%/%postname%/

とする。

なお、最後の/を.htmlや.htmにすることで、静的HTMLのアドレスに見せかけることも可能。

関連記事

Related Posts