ทำไมใส่ ปุ่มสวยๆใน single.php แล้วมันจึงโชว์ code css ด้วย

เริ่มโดย Fallen, 15 มีนาคม 2018, 22:01:17

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

Fallen

15 มีนาคม 2018, 22:01:17 แก้ไขล่าสุด: 15 มีนาคม 2018, 22:03:41 โดย Fallen
ผมลองเอาปุ่มสวยๆ ใส่ใน single.php ของ wordpress

เอา css ของมันไปแยกใส่ใน style.css
เอา html ใส่ใน single.php
แต่มันไม่ทำงาน

จึงใช้ วิธีรวม html+css เป็น1ไฟล์ แล้ว include เข้าไปใน single.php
มันทำงานแต่ จะโชว์ css ด้วย

ผมทำผิดหลักการอะไรหรือเปล่าครับ
:wanwan004:




โค้ด เลือก

<style>
@import url('[url]https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i'[/url]);
body {
 background:#353535;
 display:flex;
font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 100%;
 position:fixed;
 
 }

.download-btn {
 cursor: pointer;
   padding: 20px 80px;
   border-radius: 60px;
   border: none;
   background: #2196F3;
   position: relative;
   color: #fff;
   font-size: 17px;
   font-weight: 500;
   letter-spacing: 1.2px;
   transition: all 0.2s;
   margin: auto;
   font-family: 'Open Sans', sans-serif;
   background-image: -webkit-gradient(linear, left top, left bottom, from(#fe7550), to(#ff3339));
   background-image: linear-gradient(to bottom, #fe7550 0%, #ff3339 100%);
   font-weight: 500;
   overflow: hidden;
   box-shadow: 0px 2px 34px #fe6a4cd1;
   border: double 2px #ca9894;
 
}

button:focus {
 outline:none;
}

.download-btn:hover {
 transition:all 0.2s;
 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48aeef+0,816ddb+100 */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fe7550), to(#ff3339));
   background-image: linear-gradient(to left, #fe7550 -1%, #ff3339 80%)
}

.icon{
   display: block;
   position: absolute;
}

.icon {
   display: block;
   position: absolute;
   width: 100%;
   left: 0;
   right: 0;
   margin: auto;
   text-align: center;
   transition: all 0.4s;
   transform: translateY(30px);
 font-size:40px;
}


.download-btn:hover .main-text {
   display: block;
   transform: translateY(-70px);
   transition: all 0.2s linear;
}

.main-text {
 transition: all 0.2s;
 display:block;
}

.download-btn:hover .icon {
   transition: all 0.4s;
   transform: translateY(-40px);
}


.size {
  background: #ffffff;
   height: 50px;
   line-height: 50px;
   padding: 0 20px;
   position: absolute;
   left: -1px;
   right: 0;
   margin: auto;
   width: 95px;
   top: 50%;
   bottom: 0;
   margin-top: -135px;
   color: #353535;
   font-size: 14px;
   text-align: center;

}


.size::after {
   position: absolute;
   content: '';
   border-top: solid 10px white;
   border-bottom: solid 10px transparent;
   border-left: solid 10px transparent;
   border-right: solid 10px transparent;
   bottom: -19px;
   left: 20px;
   right: 0;
   width: 1px;
}

.size {
   background: #ffffff;
   height: 50px;
   line-height: 50px;
   padding: 0 20px;
   position: absolute;
   left: -1px;
   right: 0;
   margin: auto;
   width: 95px;
   top: 50%;
   bottom: 0;
   margin-top: -135px;
   color: #353535;
   font-size: 14px;
   text-align: center;
   transition: all 0.3s;
   transform: translateY(40px);
   opacity: 0;
}

.download-btn:hover + .size {
 opacity:1;
   transition: all 0.3s;
 transform: translateY(20px);
 
}
</style>
<button class="download-btn"> <span class="main-text">Download</span> <span class="icon"><i class="fa fa-cloud-download" aria-hidden="true"></i></span> </button>
 <div class="size">
 file Size : 2 MB
</div>





[direct=https://www.cymiz.com/]ประกันภัย[/direct]
[direct=https://www.cymiz.com/promotion/]ประกันรถยนต์ พรบ มอเตอร์ไซต์ ราคาสมาชิก[/direct]
[direct=http://cymiz.com/].[direct=http://vir9.com].[/direct][/direct]

cnxisne3019

#1
15 มีนาคม 2018, 23:58:18
เอา custom css ใส่ในส่วนที่ให้ใสใน WordPress เลยครับ ถ้าไม่มีโหลดปลั๊กอินมาใส่เลยก็ได้ครับ แก้ไฟล์มันอาจจะเห็นเป็นตัวอักษรด้วย
คนประสบความสำเร็จ       ไม่ใช่คนที่ "ไม่เคยพลาดเลย"
ในทางตรงกันข้าม...         เขาคือคนที่
"เริ่มพลาดเร็วกว่า"           "กล้าพลาดมากกว่า"
และสามารถ                   "เรียนรู้จากความผิดพลาด"
ได้เยอะกว่าคนทั่วไป...     #ข้อคิดจากขุนเขา

[direct=https://webmarketing.in.th]แหล่งความรู้ด้านการตลาดบนเว็บไซต์ และการเงินการลงทุน เข้าไปอ่านเลย[/direct]
[direct=https://web.facebook.com/groups/327473411318390/]รวมของแจกฟรีจาก Themeforest, Envato Elements, Graphicriver, Audiojungle และอีกมากมายแบบถูกสิขสิทธิ์ สนใจเข้ากลุ่มโลด ดองไว้ในนั้นแหละ[/direct]

Fallen

#2
16 มีนาคม 2018, 14:18:44
อ้างถึงจาก: cnxisne3019 ใน 15 มีนาคม 2018, 23:58:18
เอา custom css ใส่ในส่วนที่ให้ใสใน WordPress เลยครับ ถ้าไม่มีโหลดปลั๊กอินมาใส่เลยก็ได้ครับ แก้ไฟล์มันอาจจะเห็นเป็นตัวอักษรด้วย

ได้ความรู้ไหม +1
:wanwan004:
[direct=https://www.cymiz.com/]ประกันภัย[/direct]
[direct=https://www.cymiz.com/promotion/]ประกันรถยนต์ พรบ มอเตอร์ไซต์ ราคาสมาชิก[/direct]
[direct=http://cymiz.com/].[direct=http://vir9.com].[/direct][/direct]

bompople

#3
16 มีนาคม 2018, 16:06:03
ลอง

โค้ด เลือก
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i");
body {
  background:#353535;
  display:flex;
font-family: 'Open Sans', sans-serif;
   width: 100%;
   height: 100%;
  position:fixed;
 
  }

.download-btn {
  cursor: pointer;
    padding: 20px 80px;
    border-radius: 60px;
    border: none;
    background: #2196F3;
    position: relative;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: 1.2px;
    transition: all 0.2s;
    margin: auto;
    font-family: 'Open Sans', sans-serif;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fe7550), to(#ff3339));
    background-image: linear-gradient(to bottom, #fe7550 0%, #ff3339 100%);
    font-weight: 500;
    overflow: hidden;
    box-shadow: 0px 2px 34px #fe6a4cd1;
    border: double 2px #ca9894;
 
}

button:focus {
  outline:none;
}

.download-btn:hover {
  transition:all 0.2s;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#48aeef+0,816ddb+100 */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fe7550), to(#ff3339));
    background-image: linear-gradient(to left, #fe7550 -1%, #ff3339 80%)
}

.icon{
    display: block;
    position: absolute;
}

.icon {
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    transition: all 0.4s;
    transform: translateY(30px);
  font-size:40px;
}


.download-btn:hover .main-text {
    display: block;
    transform: translateY(-70px);
    transition: all 0.2s linear;
}

.main-text {
  transition: all 0.2s;
  display:block;
}

.download-btn:hover .icon {
    transition: all 0.4s;
    transform: translateY(-40px);
}


.size {
   background: #ffffff;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    position: absolute;
    left: -1px;
    right: 0;
    margin: auto;
    width: 95px;
    top: 50%;
    bottom: 0;
    margin-top: -135px;
    color: #353535;
    font-size: 14px;
    text-align: center;

}


.size::after {
    position: absolute;
    content: '';
    border-top: solid 10px white;
    border-bottom: solid 10px transparent;
    border-left: solid 10px transparent;
    border-right: solid 10px transparent;
    bottom: -19px;
    left: 20px;
    right: 0;
    width: 1px;
}

.size {
    background: #ffffff;
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    position: absolute;
    left: -1px;
    right: 0;
    margin: auto;
    width: 95px;
    top: 50%;
    bottom: 0;
    margin-top: -135px;
    color: #353535;
    font-size: 14px;
    text-align: center;
    transition: all 0.3s;
    transform: translateY(40px);
    opacity: 0;
}

.download-btn:hover + .size {
  opacity:1;
    transition: all 0.3s;
  transform: translateY(20px);
 
}
</style>
<button class="download-btn"> <span class="main-text">Download</span> <span class="icon"><i class="fa fa-cloud-download" aria-hidden="true"></i></span> </button>
  <div class="size">
  file Size : 2 MB
</div>
[direct=https://wwv.onlygroub.com]ข่าวหนัง[/direct]
[direct=https://catweb.in.th]CATWEB[/direct]

Driverhigh

#4
16 มีนาคม 2018, 19:50:33
ปกติ ผมจะใส่แต่โค๊ดในหน้า single ครับ
แล้วเอาส่วน css ใส่ในช่อง custom css ใน customize เอาครับ
อัพเกรดสกิลของตัวเอง!!
[direct=https://thatul.me/courses/wordpress-basic-code-course/] <<ขาย>> วีดีโอคอร์สสอน Basic Code สำหรับ Wordpress update 2022 | PHP CSS HTML responsive [/direct]

[direct=https://healthlifebalance.online]Health life balance[/direct]

Fallen

#5
16 มีนาคม 2018, 21:16:13
อ้างถึงจาก: Driverhigh ใน 16 มีนาคม 2018, 19:50:33
ปกติ ผมจะใส่แต่โค๊ดในหน้า single ครับ
แล้วเอาส่วน css ใส่ในช่อง custom css ใน customize เอาครับ

:wanwan017:
[direct=https://www.cymiz.com/]ประกันภัย[/direct]
[direct=https://www.cymiz.com/promotion/]ประกันรถยนต์ พรบ มอเตอร์ไซต์ ราคาสมาชิก[/direct]
[direct=http://cymiz.com/].[direct=http://vir9.com].[/direct][/direct]
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้