Merhaba arkadaşlar gezi sitesi için oluşturduğum blog sitesine değerlendirme gibi bir alan eklemek istiyorum. Her yazı eklemek için sağ bölümde bulunan düzenleme barından orda yazan yerlere yazacağım şeyi eklemek istiyorum. Nasıl yapabiliriz yada eklentisi var mıdır? Teşekkürler... Örnek resim

WordPress görsel altına değerlendirme gibi bölüm ekleme

17-10-2023, 16:10:14

#1

volkanwp

Merhaba arkadaşlar gezi sitesi için oluşturduğum blog sitesine değerlendirme gibi bir alan eklemek istiyorum. Her yazı eklemek için sağ bölümde bulunan düzenleme barından orda yazan yerlere yazacağım şeyi eklemek istiyorum. Nasıl yapabiliriz yada eklentisi var mıdır? Teşekkürler...

Örnek resim

Kabul Edilen Cevap

2 Beğeni

temanızın functions.php dosyasının en altına aşağıdaki kodu ekleyin

function degerlendirme_olustur($atts, $content, $tag){
        $atts = shortcode_atts( array(
        'sure' => 'sure',
        'tavsiye' => 'tavsiye',
        'fiyat' => 'fiyat',
    ), $atts, 'degerlendirme');

$output = '<style>
.card {
  width: 150px;
  display: flex;
  flex-direction: column;
  border: 1px solid #EF9A9A;
  border-radius: 4px;
  overflow: hidden;
  margin: 5px;
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.material-icons {
  font-size: 50px;
  color: #D32F2F;
  margin-bottom: 5px;
}

.main-description {
  color: #D32F2F;
  font-size: 12px;
  text-align: center;
}

.degerlendirme{
    display: flex;
    justify-content:center;
    width:100%;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="degerlendirme">
<div class="card">
  <div class="card-header">SÜRE</div>
  <div class="card-main">
    <i class="material-icons">timer</i>
    <div class="main-description">'.esc_html( $atts['sure'] ).'</div>
  </div>
</div>
<div class="card">
  <div class="card-header">TAVSİYE</div>
  <div class="card-main">
    <i class="material-icons">thumb_up</i>
    <div class="main-description">'.esc_html( $atts['tavsiye'] ).'</div>
  </div>
</div>
<div class="card">
  <div class="card-header">FİYAT</div>
  <div class="card-main">
    <i class="material-icons">currency_lira</i>
    <div class="main-description">'.esc_html( $atts['fiyat'] ).'</div>
  </div>
</div>
</div>';
return $output;
}
add_shortcode( 'degerlendirme', 'degerlendirme_olustur' );

değerlendirme yapacağınız yere kısa kod ekle diyin ve aşağıdaki kodu girin

[degerlendirme sure="120dk" tavsiye="7/10" fiyat="ucuz"]

sonuç

17-10-2023, 20:22:36

Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.

iskendercnr

temanızın functions.php dosyasının en altına aşağıdaki kodu ekleyin

function degerlendirme_olustur($atts, $content, $tag){
        $atts = shortcode_atts( array(
        'sure' => 'sure',
        'tavsiye' => 'tavsiye',
        'fiyat' => 'fiyat',
    ), $atts, 'degerlendirme');

$output = '<style>
.card {
  width: 150px;
  display: flex;
  flex-direction: column;
  border: 1px solid #EF9A9A;
  border-radius: 4px;
  overflow: hidden;
  margin: 5px;
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.material-icons {
  font-size: 50px;
  color: #D32F2F;
  margin-bottom: 5px;
}

.main-description {
  color: #D32F2F;
  font-size: 12px;
  text-align: center;
}

.degerlendirme{
    display: flex;
    justify-content:center;
    width:100%;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="degerlendirme">
<div class="card">
  <div class="card-header">SÜRE</div>
  <div class="card-main">
    <i class="material-icons">timer</i>
    <div class="main-description">'.esc_html( $atts['sure'] ).'</div>
  </div>
</div>
<div class="card">
  <div class="card-header">TAVSİYE</div>
  <div class="card-main">
    <i class="material-icons">thumb_up</i>
    <div class="main-description">'.esc_html( $atts['tavsiye'] ).'</div>
  </div>
</div>
<div class="card">
  <div class="card-header">FİYAT</div>
  <div class="card-main">
    <i class="material-icons">currency_lira</i>
    <div class="main-description">'.esc_html( $atts['fiyat'] ).'</div>
  </div>
</div>
</div>';
return $output;
}
add_shortcode( 'degerlendirme', 'degerlendirme_olustur' );

değerlendirme yapacağınız yere kısa kod ekle diyin ve aşağıdaki kodu girin

[degerlendirme sure="120dk" tavsiye="7/10" fiyat="ucuz"]

sonuç

18-10-2023, 00:40:41

volkanwp

iskendercnr adlı üyeden alıntı: mesajı görüntüle

temanızın functions.php dosyasının en altına aşağıdaki kodu ekleyin

function degerlendirme_olustur($atts, $content, $tag){
        $atts = shortcode_atts( array(
        'sure' => 'sure',
        'tavsiye' => 'tavsiye',
        'fiyat' => 'fiyat',
    ), $atts, 'degerlendirme');

$output = '<style>
.card {
  width: 150px;
  display: flex;
  flex-direction: column;
  border: 1px solid #EF9A9A;
  border-radius: 4px;
  overflow: hidden;
  margin: 5px;
}

.card-header {
  color: #D32F2F;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #EF9A9A;
  background-color: #FFEBEE;
  padding: 5px 10px;
}

.card-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 0;
}

.material-icons {
  font-size: 50px;
  color: #D32F2F;
  margin-bottom: 5px;
}

.main-description {
  color: #D32F2F;
  font-size: 12px;
  text-align: center;
}

.degerlendirme{
    display: flex;
    justify-content:center;
    width:100%;
}
</style>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="degerlendirme">
<div class="card">
  <div class="card-header">SÜRE</div>
  <div class="card-main">
    <i class="material-icons">timer</i>
    <div class="main-description">'.esc_html( $atts['sure'] ).'</div>
  </div>
</div>
<div class="card">
  <div class="card-header">TAVSİYE</div>
  <div class="card-main">
    <i class="material-icons">thumb_up</i>
    <div class="main-description">'.esc_html( $atts['tavsiye'] ).'</div>
  </div>
</div>
<div class="card">
  <div class="card-header">FİYAT</div>
  <div class="card-main">
    <i class="material-icons">currency_lira</i>
    <div class="main-description">'.esc_html( $atts['fiyat'] ).'</div>
  </div>
</div>
</div>';
return $output;
}
add_shortcode( 'degerlendirme', 'degerlendirme_olustur' );

değerlendirme yapacağınız yere kısa kod ekle diyin ve aşağıdaki kodu girin

[degerlendirme sure="120dk" tavsiye="7/10" fiyat="ucuz"]

sonuç

ilgin için teşekkür ederim tam da istediğim bu şekilde. Ellerinize sağlık