1. Halo Guest, pastikan Anda selalu menaati peraturan forum sebelum mengirimkan post atau thread baru.

Featured [SHARE] AMP tanpa Plugins

Discussion in 'Wordpress' started by andonk.ndonk, Aug 1, 2017.

  1. 140187

    140187 Ads.id Fan

    Joined:
    Mar 14, 2010
    Messages:
    140
    Likes Received:
    21
    Penerapan AMP dengan teknik ini hanya untuk membuat single post bisa diakses secara AMP ya? Dan untuk CSS Styling dan element single post-nya menggunakan theme asli web kita, begitukah?
     
  2. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    yups benar, khusus single post gan kalo source code di pejwan. tapi tidak memungkinkan untuk dikembangkan menjadi lebih lagi. misalkan diterapkan untuk single custom post juga bisa. kalo untuk source, styling, dan elemennya bikin sendiri gan. mengutip dari pejwan, source nya diletakkan di template-apem.php. di template-apem.php mulailah untuk menuliskan source code yang sesuai dan valid amp. seperti itu gan. sekiranya kalau kurang jelas marilah belajar bersama.

    nb: ini tag yang valid amp:
    ampproject . org/docs/getting-started/
     
  3. 140187

    140187 Ads.id Fan

    Joined:
    Mar 14, 2010
    Messages:
    140
    Likes Received:
    21
    Makasih gan, saya coba pelajari lagi,
    saya memang sedang ingin menerapkan AMP tp tak mau pakai plugin karena plugin yg tersedia saat ini setelah saya test kok malah lebih lambat 1 detik daripada halaman tanpa AMP saya hehe, theme AMP-nya yg payah atau theme saya yang kelewat ringan gak ngerti deh, soalnya saya bukan coder hehe

    makasih gan sudah ada petunjuk awal dari trit ini buat saya, nanti kalau saya bingung balik kesini lagi hehe
     
  4. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    siap, happy oprek gan. yang penting mau belajar dan eksekusi. kami siap buat saling berbagi ilmu gan
     
    140187 likes this.
  5. yosbeda

    yosbeda Ads.id Fan

    Joined:
    Apr 18, 2010
    Messages:
    150
    Likes Received:
    43
    Location:
    Wonogiri
    Bukan gan, single.php-nya tetap dibikin sendiri sesuai kaidah AMP HTML, atau bisa kopi saja template single AMP dari plugin2 AMP itu. CSS Styling untuk halaman AMP bisa ditulis langsung/inline di single.php (versi AMP-nya) atau ditulis di file php tersendiri lalu dipanggil dengan get_template_part() di single.php, index.php, atau di file template AMP agan di mana pun.

    Di bawah ini contoh isi template yang ane pakai. Template utama ane (Fatiha) berada di kiri, sementara itu yang kanannya (sub-folder-nya Fatiha) adalah direktori template AMP ane. Sebenarnya digabung jadi satu dengan folder template utama juga ngga masalah karena penamaannya file php-nya bisa dibedakan.

    [​IMG]

    Ane sih bikinnya seperti itu. Hanya dengan modal 7 file php baru, seluruh halaman blog ane sudah tersedia versi AMPnya, mulai dari home, single, kategori, tag, arsip, dll. Maaf kalau ada istilah2 yang salah, karena cuma modal Googling doang, ngga ngerti2 banget koding. :D

    Ref:
    https:// developer.wordpress.org/reference/functions/get_template_part/


    EDIT: Eh udah dijawab ya yang atas, wkwkwkwkwkw
     
    Last edited: Aug 2, 2017
    140187 likes this.
  6. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    haha, santai aja gan. tiap orang punya asumsi sendiri. baiknya, yang lain yang baca juga semoga makin dimudahkan dalam memahami.
    woh, itu bejibun gitu gan amp nya? ketahuan kemaruknya. hahaha
     
  7. 140187

    140187 Ads.id Fan

    Joined:
    Mar 14, 2010
    Messages:
    140
    Likes Received:
    21
    makasih gan, tambah tercerahkan lagi, hehe
     
  8. yosbeda

    yosbeda Ads.id Fan

    Joined:
    Apr 18, 2010
    Messages:
    150
    Likes Received:
    43
    Location:
    Wonogiri
    Hahahah iya gan, ane ibaratnya nyemplung biar basah semua deh. Bahkan semua link di halaman AMP ane juga ane bikin versi AMP (link/amp/), mulai dari breadcrumb, internal link di konten, link tag, link kategori, link author, link artikel terkait, dll. Jadi bila ada yang tersesat di artikel ane versi AMP, ngga bakal bisa balik ke versi HTMLnya, kecuali doi ngetik langsung urlnya, wkwkwk.

    Sama-sama gan.. *salaman
     
  9. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    kalo gitu, bikin website amp aja gan. gausah pake html-html an. hahahaha
     
  10. yosbeda

    yosbeda Ads.id Fan

    Joined:
    Apr 18, 2010
    Messages:
    150
    Likes Received:
    43
    Location:
    Wonogiri
    Wkwkwkwkwk.. Tujuan akhirnya sebenarnya itu. Kali aja besok2 Google "propaganda AMP-nya" makin parah, nyuruh full AMP, ane tinggal ngeswitch sub folder theme ane jadi theme utama. Siapa tahu nanti usai mobile-first index benar2 "dijalankan" Google, itu tadi terjadi. hehehehe..

    Ngomong2, kini makin banyak ya web2 besar yang desainnya benar2 mengkhususkan untuk user/visitor mobile, salah satunya Huffingtonpost. Kelak, pengunjung website mungkin tidak tahu apa itu sidebar/widget. :D
    [​IMG]
    :hmm2:
     
  11. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    kalo kayak gitu entar lama-lama asu* rok gak laku gan. wkwkwk

    sebenarnya ada enaknya, ada enggak nya. enaknya saya sebagai programmer menjadi lebih ringan karena pekerjaannya jadi lebih mudah. gak enaknya itu, anu, anu, dan anu, serta dan sebagainya, dan sebagainya, hahahaha
     
  12. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    saya punya ide lain. nyambi gitaran barusan ,tiba-tiba aja terfikir, lewat di otak, kayak angin pantat. gila mungki iya, demi mendapatkan url yang berbeda dengan post aslinya, gimana kalau memakai method paling simple, yakni method GET? gimana menurut agan?
     
  13. BurhanSanjaya

    BurhanSanjaya Ads.id Pro

    Joined:
    Nov 19, 2013
    Messages:
    490
    Likes Received:
    17
    lagi bad mood baca komeng teman2, tetapi secara keseluruhan bagus ini tutorial aku bookmark dulu dach besuk baca lagi
    #kepencetlinke hehe
     
  14. yosbeda

    yosbeda Ads.id Fan

    Joined:
    Apr 18, 2010
    Messages:
    150
    Likes Received:
    43
    Location:
    Wonogiri
    Ane masih belum paham gan maksudnya, bisa diperjelas? hehehe
    :hmm2:
     
  15. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    duh, jadi nafsu bukak lepi buat uprek-uprek ini. haha
    langsung aya ane jabarin dan semoga bisa dipahamin

    buat url amp nya di head.php
    PHP:
    <link rel="amphtml" href="http://websetdotkom/urlpos/?kanggo=amp">
    dan ini nyang dipake buat single.php. dan di single dibagi jadi dua. yakni
    PHP:
    <?php if(isset($_GET['kanggo'])){ // buat amp
        
    $peg$_GET['kanggo'];
        if(
    $peg=="amp"){;?>       
            <!doctype html>
                <html ⚡>
                  <head>
                    <title>titel amp</title>
                  </head>
                  <body>
                    <p>konten</p>
                  </body>
            </html>
        <?php }
    }else{ 
    // buat single post website
        
    get_header();
        
    the_content();
        
    get_footer();
    };
    ?>
    gimana menurut agan?
     
  16. yosbeda

    yosbeda Ads.id Fan

    Joined:
    Apr 18, 2010
    Messages:
    150
    Likes Received:
    43
    Location:
    Wonogiri
    Itu metode keren banget kayaknya. Tapi ane sangsi untuk pengembangan atau edit2 ke depannya bakal nyaman. Itu nanti bukannya jadi puanjang banget ya single.php-nya.

    Kalau basicnya programmer kayak agan sih nyantai ya, lha kalau yang modal Googling gabung2in kode boleh nemu dari Stackoverflow kayak ane bisa berabe, wkwkwkwkw..
    :pusing:

    Ane aja bikin template AMP dipecah2 gini biar ane ke depan ngedit2nya gampang gan.
    PHP:
    <!-- Header AMP -->
    <?php get_template_part('amp/amp-header'); ?> 

    <!-- Conten Single AMP -->
    <div id="content">
       
    <body>
        <p>konten</p>
    </body>
       
    </div>

    <!-- Footer AMP -->
    <?php get_template_part('amp/amp-footer'); ?> 

    </body>
    </html>
    Suka pusing kalau digabung2 jadi banyak gitu, takut salah nempatin "if", "else", "elseif", ")", "}", ";", dll. Soalnya ane dari 5 tahun silam pakai template yang sama, dan pasti setiap beberapa bulan sekali butuh ngedit2. Kalau jadi puanjang gitu takut malah error pas ngedit selanjutnya.
    :swt2:
     
  17. dadada

    dadada Super Hero

    Joined:
    Dec 10, 2013
    Messages:
    2,514
    Likes Received:
    999
    Wainii,,,,

    Ane selama ini pakai plugin amp automatic,,, Jadi masih harus injeksi code sana-sini, maklum gagal jadi coder,,, :D kesannya kok malah jadi ribet banget hixz....


    Mungkin cara ini akan jadi solusi ane yg lebih baik,,,,

    Pengennya ane halaman category juga bisa di amp in, kira2 nambah apanya tuh gan?... apakah hanya tinggal tambah logika ifelse aja?,, :D Thx
     
  18. wanto mujahiroh

    wanto mujahiroh Hero

    Joined:
    Oct 27, 2016
    Messages:
    590
    Likes Received:
    39
    Location:
    Indonesia
    Nyimak gan...
     
  19. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    oh gitu, kalo mau dipecah-pecahin, kan tinggal kek gini gan? ehhehe

    PHP:
    <?php if(isset($_GET['kanggo'])){ // buat amp
        
    $peg$_GET['kanggo'];
        if(
    $peg=="amp"){
            include(
    TEMPLATEPATH '/folder-amp/template-amp.php');
            }
    }else{ 
    // buat single post website
        
    get_header();
        
    the_content();
        
    get_footer();
    };
    ?>
     
  20. andonk.ndonk

    andonk.ndonk Ads.id Starter

    Joined:
    Jun 11, 2014
    Messages:
    98
    Likes Received:
    27
    Location:
    Yogyakarta
    yups, bener gan. tinggal ditambahin parameter category aja gan. kurang lebih kek beginian nih.
    PHP:
    <?php    if ( is_single() ) {
            
    // amp buat single
        
    }
        if ( 
    is_category() ) {
            
    // amp buat category
        
    }
    ;
    ?>
    monggo gan
     

Share This Page