WordPressサイトでカスタムCSSとHTMLのみを使用して素敵なDealsページを作成するにはどうすればよいですか？

公開: 2019-01-10

いつでも、市場には何千もの取引があります。布、家具、ユーティリティ、そしてWordPressプラグイン、テーマ、サービス、ホスティングなどの取引。

お得なページを作成することは、すべてのブロガーにとっての夢の1つです。素敵なDealsページを作成するのに役立つプラグインはほとんどありません。

お得なページをチェックしましたか？ https://crunchify.com/deals/。
最近、Dealsページを別の形式で更新しましたが、このチュートリアルでは、すばらしいDealsページが生成され、完全に機能します。

そうでない場合は、それをチェックして、あなたがどう思うか教えてください。 Crunchifyで、このカスタム取引ページを作成しました。カスタムプラグインは使用していません。カスタムCSSのみに基づいて構築されています。

同様のカスタム取引ページを作成したい場合は、適切な場所にいます。 CSSとHTMLコードを調べて、非常によく似たページを作成します。

始めましょう：

ステップ-1CSS（style.css）

WordPressテーマのstyle.cssファイルを開き、以下のコードを追加します。

/* For Deals Box */

div . crunchify - panel {

float : left ;

width : 43 % ;

margin : 25px ;

padding : 35px 30px 30px 30px ;

border : 1px solid #ececec;

font - size : 15px ;

position : relative ;

box - shadow : 0 1px 4px rgba ( 0 , 0 , 0 , . 3 ) , 0 0 40px rgba ( 0 , 0 , 0 , . 1 ) inset ;

height : 420px

}

div . crunchify - panel img {

border : 1px solid #e8e8e8

}

/* For Rectangle Dotted box */

. crunchify - deals - coupon {

border : 2px dashed #dd7127;

padding : 3px 3px 5px 8px ;

border - radius : 5px ;

color : #464646;

font - size : 13px ;

display : inline - block ;

margin - bottom : 15px ;

width : 100 % ;

}

. crunchify - deals - coupon : : before {

font - size : 18px ;

vertical - align : top ;

content : "\f0a4" ;

font - family : "Font Awesome 5 Free" ;

color : #b11f24;

margin : 5px 10px ;

}

. crunchify - deals - coupon : hover {

border : 2px solid #dd7127;

text - decoration : none

}

上記のCSSコードは、取引セクションの優れたレイアウトを作成します。

CrunchifyではFontAwesomeフォントを使用しています。そのため、手の矢印アイコンが表示されます。 WordPressテーマにFontAwesomeを追加する場合は、詳細なFontAwesomeチュートリアルに従ってください。

ステップ-2（HTMLページ）

Pagesに移動
[ Add Newクリックします
新しいFull widthページを作成する
以下のコードをページのHTMLセクションに配置します
ファイルを保存

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/GenesisWP-Crunchify-Deals.png" alt = "Genesis WordPress Framework Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://crunchify.me/genesis" target = "_blank" rel = "noopener noreferrer" > Genesis WP < / a > < / h3 >

< p style = "text-align: center;" > Best WordPress design frameworks . Quickly and easily build incredible websites - < a href = "https://crunchify.com/crunchify-co-moved-to-genesis-framework-thesis-vs-genesis/" target = "_blank" rel = "noopener noreferrer" > Details < / a > < / p >

< / div >

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > < img class = "aligncenter size-full" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/WP-Engine-Crunchify-Deals.png" alt = "WP Engine" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a title = "Premium WordPress Themes that Work" href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > WP Engine < / a > < / h3 >

< p style = "text-align: center;" > Crunchify and WP Engine have teamed up to give you a special offer . Vibrant and Fully Managed WordPress Hosting < / p >

< div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://crunchify.me/wp-engine" target = "_blank" rel = "noopener noreferrer" > crunchify25 < / a > < / div >

< / div >

< div class = "crunchify-panel" >

< a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/MaxCDN-Crunchify-Deals.png" alt = "MaxCDN Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > MaxCDN < / a > < / h3 >

< p style = "text-align: center;" > One of the best CDN for WordPress & used at Crunchify . MaxCDN speeds up your website - < a href = "https://crunchify.com/maxcdn-content-delivery-network-and-crunchify-exclusive-coupon-code-crunchify/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >

< div class = "crunchify-deals-coupon" > < b > 25 % < / b > off Coupon : < a href = "https://www.stackpath.com/products/cdn/" target = "_blank" rel = "noopener noreferrer" > CRUNCHIFY < / a > < / div >

< / div >

< div class = "crunchify-panel" >

< a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > < img class = "size-full aligncenter" src = "https://cdn.crunchify.com/wp-content/uploads/2017/08/BlueHost-Crunchify-Deals.png" alt = "Bluehost Logo" width = "100" height = "100" / > < / a >

< h3 style = "text-align: center;" > < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Bluehost < / a > < / h3 >

< p style = "text-align: center;" > One of the largest and most trusted web hosting services powering millions of site - < a href = "https://crunchify.com/bluehost-wordpress-hosting/" target = "_blank" rel = "noopener noreferrer" > Steps < / a > < / p >

< div class = "crunchify-deals-coupon" > Upto < b > 40 % < / b > off link : < a href = "https://crunchify.me/bluehost" target = "_blank" rel = "noopener noreferrer" > Click here < / a > < / div >

< / div >

上記のコードは、4つの異なる取引セクションを追加します。必要に応じてリンクと画像を置き換えるだけです。

上記のコードをテーマに追加する際に問題が発生した場合はお知らせください。