Tüm Araçlar
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al
lostyazilim
tr.link

HTML + CSS + JS üçlüsünü wordpresse entegre etmek?

 4 Mesajlar 693 Okunma
lstbozum
tr.link

#1
kdrucr kdrucr WM Aracı Kullanıcı
  • Üyelik 14.01.2014
  • Yaş/Cinsiyet 46 / E
  • Meslek Öğretmen
  • Konum Ankara
  • Ad Soyad K** U**
  • Mesajlar 526
  • Beğeniler 231 / 69
  • Ticaret 1, (%100)
https://codepen.io/MacEvelly/pen/YXyRVE

Bu sayfada yer alan dosyaları wordpresse nasıl entegre ederim? şimdiden yardımlarınız için teşekkürler.
 

 

wmaraci
reklam

#2
kdrucr kdrucr WM Aracı Kullanıcı
  • Üyelik 14.01.2014
  • Yaş/Cinsiyet 46 / E
  • Meslek Öğretmen
  • Konum Ankara
  • Ad Soyad K** U**
  • Mesajlar 526
  • Beğeniler 231 / 69
  • Ticaret 1, (%100)
HTML + CSS + JS birleştiren ve bunu kısayol ile sayfaya ekleyen bir plugin buldum. Son durum bu ancak resmi göstermiyor. SVG resim yolu doğru ancak çekmiyor bunun sebebi ne olabilir?

http://prntscr.com/n4uhah
 

 

#3
Escalous Escalous Üyeliği Durdurulmuş Banlı Kullanıcı
  • Üyelik 09.08.2018
  • Yaş/Cinsiyet 24 / E
  • Meslek (.*?)
  • Konum Diğer
  • Ad Soyad A** Ş**
  • Mesajlar 1392
  • Beğeniler 421 / 799
  • Ticaret 4, (%100)
Bunun için bir eklentiye vs. ihtiyacınız yok.

Javascript kodunuza şu eklemeyi yapın, yada ayrı bir js dosyası oluşturun, yada <script></script> olarak inline kullanın;

(function( $ ) {

console.clear()
console.log('svgColor')

var mainHolder, colorHolder
var btnRandom, btnClear, btnDownloadSVG, btnDownloadPNG
var svgObject, svgOutline, svgColor
var swatchUp, swatchDown
var fillSpeed = 0.15
var chosenColor = '#FFFFFF'
var colors = ['#FFFFFF', '#8E53A1', '#6ABD46', '#71CCDC', '#F7ED45', '#F7DAAF', '#EC2527', '#F16824', '#CECCCC', '#5A499E', '#06753D', '#024259', '#FDD209', '#7D4829', '#931B1E', '#B44426', '#979797', '#C296C5', '#54B948', '#3C75BB', '#F7ED45', '#E89D5E', '#F26F68', '#F37123', '#676868', '#9060A8', '#169E49', '#3CBEB7', '#FFCD37', '#E5B07D', '#EF3C46', '#FDBE17', '#4E4D4E', '#6B449B', '#BACD3F', '#1890CA', '#FCD55A', '#D8C077', '#A62E32', '#F16A2D', '#343433', '#583E98', '#BA539F', '#9D2482', '#DD64A5', '#DB778D', '#EC4394', '#E0398C', '#68AF46', '#4455A4', '#FBEE34', '#AD732A', '#D91E36', '#F99B2A']
var closeOffset

function swatchClick(){
chosenColor = $(this).data('color')
console.log(chosenColor)
TweenMax.to(colorHolder, fillSpeed, { backgroundColor:chosenColor })
}
function swatchMove(e){
var moveTo = (e.type == 'mouseenter')? swatchUp: swatchDown;
TweenMax.to('.swatchHolder', 0.5, moveTo);
}

function colorMe() {
TweenMax.to(this, fillSpeed, { fill: chosenColor });
}
function colorRollover(e){
var rollover = (e.type == 'mouseenter')? {scale:1.2}:{scale:1};
TweenMax.to($(this), 0.05, rollover);
}

function svgRandom() {
$(svgColor).each(function(){
var randomNum = Math.floor((Math.random() * colors.length) + 1);
TweenMax.to(this, fillSpeed, { fill: colors[randomNum] });
})
}
function svgClear() {
$(svgColor).each(function(){
TweenMax.to(this, fillSpeed, { fill: "#FFF" });
})
}
function svgDownloadSVG() {
var svgInfo = $("
").append($(svgObject).clone()).html();
$(this).attr({
href:"data:image/svg+xml;utf8,"+svgInfo,
download:'coloringBook.svg',
target:"_blank"
});
}
function svgDownloadPNG() {
// Future expantion:
// Look at https://bl.ocks.org/biovisualize/8187844
}

$.fn.makeSwatches = function() {
var swatchHolder = $('
    ', {'class': 'swatchHolder'}).appendTo(this)
    colorHolder = $('
  1. ', {'class': 'colorHolder', 'text':'Current Color'}).css('background-color', chosenColor).appendTo(swatchHolder)

    $.each(colors, function() {
    var swatch = $('
  2. ').appendTo(swatchHolder)
    $(swatch).css('background-color', this)
    $(swatch).data('color', this)
    $(swatch).on('click', swatchClick)
    $(swatch).on('mouseenter mouseleave', colorRollover)
    })

    var swatchPos = $('.colorHolder').position()
    var swatchHeight = $('.colorHolder').outerHeight(true) + swatchPos.top
    closeOffset = swatchHeight - $('.swatchHolder').outerHeight()

    $('.swatchHolder').on('mouseenter mouseleave', swatchMove)
    $('.swatchHolder').css('bottom',closeOffset)
    swatchUp = {css:{bottom:0}}
    swatchDown = {css:{bottom:closeOffset}}
    }
    $.fn.makeSVGcolor = function(svgURL) {
    mainHolder = this
    $( this ).load(svgURL, function() {
    svgObject = $('svg', this)
    svgColor = $('g:nth-child(2)', svgObject).children()
    svgOutline = $('g:nth-child(1)', svgObject).children()
    $(svgColor).on('click', colorMe)
    $(mainHolder).makeSwatches()
    $('.swatchHolder').addClass('gray')
    });
    }

    $.fn.btnRandom = function() {
    btnRandom = this
    $(btnRandom).on('click', svgRandom)
    }
    $.fn.btnClear = function() {
    btnClear = this
    $(btnClear).on('click', svgClear)
    }
    $.fn.btnDownload = function(type) {
    if(type == 'PNG'){
    btnDownloadPNG = this
    $(this).on('mouseenter', svgDownloadPNG)
    } else {
    btnDownloadSVG = this
    $(this).on('mouseenter', svgDownloadSVG)
    }
    }
    }( jQuery ));

    $('#ActivityDIV' ).makeSVGcolor('https://s3-us-west-2.amazonaws.com/s.cdpn.io/40041/cheshire.svg')
    $('#btnRandom' ).btnRandom()
    $('#btnClear' ).btnClear()
    $('#btnDownloadSVG').btnDownload()

    .css dosyanıza şu eklemeyi yapın;


    @import url("https://codepen.io/MacEvelly/pen/iJGCw.css");

    .holder{
    width:700px;
    }
    .held{
    position:relative;
    overflow:hidden;
    }
    .button{
    width:150px;
    padding:10px;
    }

    #ActivityDIV .swatchHolder{
    position:absolute;
    bottom:0px;
    margin:auto;
    left:0px;
    right:0px;
    list-style-type:none;
    text-align:center;
    display:inline-block;
    padding: 15px;
    width:260px;
    border-radius: 20px 20px 0px 0px;
    color: black;
    }
    #ActivityDIV .swatchHolder .colorHolder{
    width:100%;
    line-height: 100%;
    content:'Chosen Color';
    padding: 10px 0px;
    margin: 0px auto 15px auto;
    cursor:pointer;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    }
    #ActivityDIV .swatchHolder li:not(.colorHolder){
    height:25px;
    width:25px;
    margin:2px;
    display:inline-block;
    cursor:pointer;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
    }

    #ActivityDIV svg{
    width:100%;
    display:inline-block;
    }
    #ActivityDIV svg path{
    cursor:pointer;
    }


    ve İlgili kısmı nerede göstermek istiyorsanız şu kodu oraya ekleyin.



    SVG Coloring Book



    Random Color
    Clear Color
    Download SVG




    Sitenizin herhangi bir kısmında kullanmak istiyorsanız tema dosyalarınızdan ilgili kısmı bulun ve oraya ekleme yapın.

    Örn: yazılar için(content.php,single.php gibi) farklılıklar gösterebilir.

    Yan sidebarda göstermek istiyorsanız bileşenler kısmına özel html oluşturup yazın.
kdrucr

kişi bu mesajı beğendi.

#4
kdrucr kdrucr WM Aracı Kullanıcı
  • Üyelik 14.01.2014
  • Yaş/Cinsiyet 46 / E
  • Meslek Öğretmen
  • Konum Ankara
  • Ad Soyad K** U**
  • Mesajlar 526
  • Beğeniler 231 / 69
  • Ticaret 1, (%100)
Escalous Hemen deniyorum çok teşekkürler.
 

 

wmaraci
wmaraci
[Çözüldü]Günü Menüsü Eklentisi Aramaktayım!
Tek Bir Postu için Kategorilere Bağlı Kalmadan Url Yapılandırması Yapılabilir Mi ?
wmaraci
wmaraci
Konuyu toplam 1 kişi okuyor. (0 kullanıcı ve 1 misafir)
 
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al