வேர்ட்பிரஸ்

இரு நிரல் படிவம் ஒன்றை வேர்ட்பிரஸில் உருவாக்குதல்

வேர்ட்பிரஸில் ஒரு அழகான படிவம் ஒன்றினை உருவாக்குவது பற்றி சில நாட்களின் முன்னர் ஒரு பதிவில் பார்த்தோம். இப்பதிவில் Contact Form 7 இனை பயன்படுத்தி இரு நிரல்கள் உடைய ஒரு படிவம் ஒன்றை உருவாக்குவதனை பார்ப்போம்.

முதலில் Form editor இனை பயன்படுத்தி படிவத்தை உருவாக்கிக் கொள்ள வேண்டும். எங்களுக்கு இரு நிரலில் படிவம் தேவை என்பதனால் Form field களை css class களினால் கீழ் காட்டியது போல வேறுபடுத்திக் கொள்ள வேண்டும்.

<div id="two-column">
<div id="left">
First Name[text* first-name]
Email[email* your-email]
</div>

<div id="right">
Last Name[text* last-name]
Phone[text* your-phone]
</div>

Subject[text* your-subject]
Your message [textarea your-message]

[submit "Send"]
</div>

இங்கே சில விடயங்களை கவனிக்க வேண்டும்.
அ. ஒவ்வொரு Form field உம் P tag இனால் சூழப்பட்டுள்ளன.
ஆ. Label உம் Form element உம் br tag இனால் வேறுபடுத்தப்பட்டுள்ளன.
இ. #two-column என்கின்ற CSS ID இனால் முழு படிவமும் சூழப்பட்டுள்ளது.
ஈ. இடது புறம் இருக்கவேண்டியவை #left என்கின்ற CSS ID இனால் சூழப்பட்டுள்ளன.
உ. வலது புறம் இருக்கவேண்டியவை #right என்கின்ற CSS ID இனால் சூழப்பட்டுள்ளன.

படிவத்தை வேர்ட்பிரஸ் பக்கம் ஒன்றினில் சேர்த்து வெளியிட்டுக்கொள்ளுங்கள். பொதுவாக கீழ்க்காட்டப்பட்டது போல படிவம் இருக்கும்.

இப்பொழுது கொஞ்சம் CSS இனை சேர்ப்பதன் மூலம் படிவத்தை அழகாக்கிக் கொள்ளப் போகின்றோம்.

#two-column{
    width: 550px;
}
#two-column #left{
    width: 300px;
    float: left;
}
#two-column #right{
    width: 250px;
    float: right;
}
#two-column p{
    margin-bottom: 12px;
}
#two-column input[type="text"]{
    border:none;
    border:1px solid #000;
    font-size :14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
    padding: 5px;
}
#two-column #right input[type="text"], #two-column #left input[type="text"]{
    width:240px;
}
#two-column textarea {
    position: relative;
    padding: 5px;
    border:1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 540px;
}
#two-column input[type="submit"]{
    padding:8px 18px;
    background:#222;
    color:#fff;
    border: 1px solid #fff;
    float:right;
    font-size: 14px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
#two-column input[type="text"]:focus, #two-column textarea:focus{
    background: #eee;
}
#two-column input[type="submit"]:hover{
    background:#fff;
    color:#222;
    border: 1px solid #222;
}

இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டியதுபோல இருக்கும்.

6 பங்குனி, 2012

அழகான படிவமொன்றை வேர்ட்பிரஸினில் உருவாக்குதல்

படிவங்கள் என்று வருகின்ற போது வேர்ட்பிரஸில் இருக்கும் சிறந்த ஒரு இலவச நீட்சி Contact form 7. மிக இலகுவாக படிவங்களை உருவாக்கிக் கொள்ள முடியவதும், அதனை இலகுவாக அழகுபடுத்திக் கொள்ள முடிவதும் இதன் சிறப்பம்சமாகும். இந் நீட்சியை பயன்படுத்தி வித்தியாசமானதொரு படிவத்தை எவ்வாறு உருவாக்கிக் கொள்ளுவது என்று படிமுறையாக பார்ப்போம்.

௧. படிவத்தொகுப்பானை பயன்படுத்தி உங்கள் படிவத்தினை கீழ் காட்டியவாறு உருவாக்கிக் கொள்ளுங்கள். படிவம் ஒரு பந்திக்குள் இடைச்செருகப் பட்டுள்ளது.

    சில விடயங்களை இங்கே கவனித்துக் கொள்ள வேண்டும்.
    அ. பந்தி முழுவதனையும் “p” tag இனால் மூடிக்கொள்ள வேண்டும்.
    ஆ. Contact form 7 இன் Watermark வசதியை label ஆக பயன்படுத்திக் கொள்ளலாம்.

௨. உங்கள் படிவத்தை வேர்ட்பிரஸ் பக்கம் ஒன்றினில் சேர்த்து வெளியிட்டுக் கொள்ளுங்கள்.
௩. இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டப்பட்டது போல இருக்கும். (உங்கள் வார்ப்புருவைப் பொறுத்து மாறுபடலாம்.)

௪. கொஞ்ச css உங்கள் படிவத்தை அழகாக்கி விடும். (எனது படிவத்தை நான் myform என்கின்ற css id இனால் வேறுபடுத்தியிருக்கின்றேன்.)

#myform{
    width:650px;
}
#myform p{
    font-size:14px;
    line-height:30px;
}
#myform input[type="text"]{
    border:none;
    border-bottom:1px dotted #000;
    background: transparent;
    font-size :14px;
    width:250px;
}
#myform .watermark{
    color:#ccc;
}
#myform select {
    -webkit-appearance: button;
    -webkit-border-radius: 2px;
    -webkit-padding-end: 10px;
    -webkit-padding-start: 2px;
    -webkit-user-select: none;
    background-image: url(images/select_arrow.gif),
    -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
    background-color:transparent;
    background-position: center right;
    background-repeat: no-repeat;
    border:none;
    border-bottom: 1px dotted #000;
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#myform input[type="submit"]{
    padding:8px 18px;
    background:#222;
    color:#fff;
    border: 1px solid #fff;
    float:right;
    margin-right:20px;
}
#myform input[type="submit"]:hover{
    background:#fff;
    color:#222;
    border: 1px solid #222;
}

௫. இப்பொழுது உங்கள் படிவம் கீழ்க்காட்டப்பட்டது போல இருக்கும்.

23 மாசி, 2012

வேர்ட்பிரஸினை backup செய்வது எவ்வாறு?

வேர்ட்பிரஸ் ஆனது இலகுவாக இணையத்தளங்கள் மற்றும் வலைப்பதிவுகளை உருவாக்குவதற்கு பயன்படும் மிகப்பிரபலமான ஒரு CMS ஆகும். அண்மையில் றொசான் எவ்வாறு வேர்ட்பிரஸினை Backup செய்வது எனக் கேட்டிருந்தார்.

இதனை பொதுவாக இரண்டு வழிகளில் செய்து கொள்ள முடியும். இவ்வழிகளினை விட இப்பொழுது நான் பயன்படுத்து மிக இலகுவான ஒரு முறையும் உள்ளது.

முதலாவது முறை:-

Cpanel hosting இனை வைத்திருப்பவர்கள் நேரடியாக தங்கள் cpanel control panel இல் உள்நுழைந்து தங்களது இணைத்தளம் முழுவதையும் இலகுவாக அங்கிருந்து backup செய்து கொள்ள முடியும். வேர்ட்பிரஸ் என்று மட்டுமல்லாது உங்கள் இணையத்தளம் எவ்வாறு உருவாக்கப்பட்டிருந்தாலும் இதனை பயன்படுத்த முடியும். இம்முறை மூலம் உங்கள் கோப்புக்கள் மற்றும் தரவுத்தளங்கள் அனைத்தும் ஒரே சொடுக்கில் backup செய்யப்படும்.

இம்முறையை பயன்படுத்தி மிக இலகுவாக உங்கள் இணையத்தளத்தை ஒரு வழங்குனரிடம் இருந்து இன்னொருவரிடம் மாற்றிக் கொள்ளலாம்.

இரண்டாவது முறை:-

இம்முறைமூலமும் நீங்கள் இலகுவாக Backup செய்து கொள்ள முடியும். இதற்கு உங்களிடம் ஒரு FTP மென்பொருளும் உங்கள் தரவுத்தளத்தினை அணுகுவதற்கு ஒரு மென்பொருளும் இருத்தல் வேண்டும். (phpMyAdmin சிறப்பானது மற்றும் இலகுவானது.).

முதலில் உங்கள் FTP மென்பொருளை பயன்படுத்தி உங்கள் வழங்கியினுள் உள்நுழைந்து அங்கிருந்து wp-content கோப்புறையை தரவிற்க்கி கொள்ளுங்கள்.

பின்னர் phpMyAdmin இனை பயன்படுத்தி உங்கள் தரவுத்தளத்தினை திறந்து கொள்ளுங்கள்.


இப்பொழுது வலப்புறத்தில் உங்கள் தரவுத்தளத்தில் உள்ள எல்லா அட்டவணைகளும் தெரியும். மேலுள்ள Export பொத்தானை சொடுக்குங்கள்


இப்பொழுது உங்கள் SQL கோப்பு தரவிறக்கப்பட்டு விடும்.

நீங்கள் வேறொரு வழங்கிக்கு இத்தளத்தை கொண்டு செல்ல விரும்பின் முதலில் அவ்வழங்கியில் சாதாரணமாக வேர்ட்பிரஸினை நிறுவிக்கொண்டு பின்னர் நீங்கள் தரவிறக்கி வைத்திருக்கும் wp-content கோப்புறையை தரவேற்றி விட வேண்டும். அதன் பின்னர், புதிய நிறுவலின் தரவுத்தளத்தினை phpMyAdmin இல் திறந்து import மூலம் உங்கள் sql கோப்பினை அங்கு உள்நுழைத்து விட்டீர்களானால் சரி.

நான் இப்பொழுது பயன்படுத்தும் முறை:- 

WPremote என்கின்ற இலவச சேவை நீங்கள் இலகுவாக உங்கள் வேர்ட்பிரஸ் தளத்தினை backup செய்து கொள்ள உதவுகின்றது.

  1. https://wpremote.com இணையத்தளத்திற்கு சென்று ஒரு கணக்கினை உருவாக்கிக் கொள்ளுங்கள்.
  2. அங்கே உங்கள் தளத்தினை இணைத்துக் கொள்ளுங்கள். இதற்கு நீங்கள் அவர்களின் நீட்சியை நிறுவிக்கொள்ள வேண்டும்.
  3. இப்பொழுது நீங்கள் உங்கள் நிறுவல் தொடர்பான விபரங்களையும் Backup செய்து கொள்ளுவதற்கான வழிமுறையினையும் அங்கு காண முடியும்.

குறிப்பு: இந்த சேவை ஒரு புதிய சேவையாகும். எனவே ஒரு சிறிய தளத்தை முதலில் இணைத்து நீங்களாகவே பரிசோதித்து பார்த்துக்கொள்ளுங்கள்.

14 மாசி, 2012