[Welcart] 注文完了画面をCSSでカスタマイズする
公開日:
:
最終更新日:2013/08/06
未分類
Welcartをオリジナルテンプレートで作成した場合、注文完了画面が下記図のように「送信が完了しました」と「お買い上げありがとうございました。」、「ご不明な点などがございましたら、お問合せよりご連絡ください。」、「トップページへ戻る」ボタンが、左に寄っていますよね。これを真ん中にスタイルシートで中央に寄せてみましょう。
それには、この文字を生成しているソースをいじる必要があります。
以下の階層を参考wordpressフォルダから「completion.php」を見つけて、エディタで開いてください。
wp-content > plugins > usc-e-shop > template > cart > completion.php
そして中のソースの以下のところに class名 を追加します。
●8行目
class=”sample_h3″ を追加 (※クラス名なので名前はなんでもOK)
[html]$html .= ‘<h3 class="comlete_order sample_h3">’.__(‘It has been sent succesfully.’, ‘usces’).’</h3>’."n";[/html]
●10行目
sample_header を追加 (※クラス名なので名前はなんでもOK)
[html]$html .= ‘<div class="header_explanation sample_header">’."n"; [/html]
●19行目
sample_footer を追加 (※クラス名なので名前はなんでもOK)
[html]$html .= ‘<div class="footer_explanation sample_footer">’."n"; [/html]
●25行目
class=”sample_send” を追加 (※クラス名なので名前はなんでもOK)
[html]$html .= ‘<div class="send complete_send"><input name="top" type="submit" value="’.__(‘Back to the top page.’, ‘usces’).’" /></div>’."n";[/html]
ここまでできたらあとはstyle.cssでクラス名に対して指示を出すだけです。
style.css を 開いて、下記のように記述します。
[css].sample_h3
{text-align: center;}
.sample_header
{text-align: center;}
.sample_header {text-align: center;}
.sample_send {text-align: center;}
[/css]
これで下図のように中央に寄ります。
※反映されないときはキャッシュが残っている可能性があります。注文事項記入画面でF5キーを押してリセットしてみてください。
もっとデザインを変えたい場合は先ほどのクラス名にいろいろ指示を与えればいいですね☆
ad
関連記事
-
WordPressテーマ「stinger」にはメタキーワードタグとディスクリプションタグが無い!?
SEOにつよいWordpressテーマ「stinger」には、「meta keyword」、「met
-
[Welcart]複合検索をチェックしたもの全て表示させる
Welcartの複合検索はデフォルトではチェックしたすべてに当てはまらないとヒットしないようになって
-
[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる
WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n
-
1.グーグルの無料メール(gMail)を取得する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
無料のウイルス対策ソフトMicrosoft Security Essentials (マイクロソフト セキュリティ エッセンシャルズ) を使う
今まで使用していたアンチウイルスソフトの期限が切れてしまい、しばらくウイルスソフトなしで使っていたの
-
[Welcart]会員のログイン状態とログアウト状態でリンク先を変える
Welcartでウィジェットのログイン・ログアウト状態によって表示を変えたり、リンク先を変えたりした
-
未来サーバーの無料で広告が出ないプランでwordpressをインストールしてサイトを作成する方法
未来サーバーの無料で広告が出ないプランででwordpressをインストールしてサイトを作成する方法を
-
[Photoshop]透過画像のふちをきれいに書き出し保存する
フォトショップ(Photoshop)で作成した透明部分がある、見出しアイコン用の透過画像を作成しまし
-
[WordPress]ContactForm7をオリジナルページで表示させる方法
大変便利なプラグインContactForm7ですが、通常の設置方法は の を投稿ページや固定
-
3.無料で高機能なアクセス解析Google Analytics(アナリティクス)を設置する
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する