[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
-
2.ワードプレスが使えて、広告の表示が無い無料レンタルサーバーwkey.meでサイトを作る
完全無料でWordPress(ワードプレス)サイトを作ってアクセス解析やアフェリエイト広告を設置する
-
[welcart]商品複合検索ページの ①「カテゴリー : AND検索」という題文を変える ②チェックボタンと文字のスペースを空ける方法
①ウェルカートの商品複合検索ページはデフォルトで題が カテゴリー : AND検索 となっていま
-
[Welcart]複合検索をチェックしたもの全て表示させる
Welcartの複合検索はデフォルトではチェックしたすべてに当てはまらないとヒットしないようになって
-
[Welcart]会員のログイン状態とログアウト状態でリンク先を変える
Welcartでウィジェットのログイン・ログアウト状態によって表示を変えたり、リンク先を変えたりした
-
[WordPress]WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる
WPtap Mobile Detectorでスマートフォンテーマにリダイレクトさせる方法 &n
-
未来サーバーの無料で広告が出ないプランでwordpressをインストールしてサイトを作成する方法
未来サーバーの無料で広告が出ないプランででwordpressをインストールしてサイトを作成する方法を
-
[Windows7]ファイル拡張子ごとのアイコンを簡単に変更する方法
Windows7 でファイルを拡張子ごとにアイコンを変えたいときの方法です。 たとえば、txtファ
-
Adobeのソフトのアイコンが正しく表示されない時の直し方(Photoshop・Illustrator・Flash・Fireworks・Bridge・Extension Manager等)
AdobeのCS6を購入し、インストールしたのですがいくつかのソフトのアイコンが正しく表示されない現
-
[HTML/CSS]classかつclassでセレクタを指定するときの方法(2つ以上複数のclassで指定するとき)
WordPrsssを使っているとbodyクラスが大変便利ですが、トップページもその他ページも「固定ペ