Posts Tagged "தமிழ் வேர்ட்பிரஸ்"

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

வேர்ட்பிரஸில் ஒரு அழகான படிவம் ஒன்றினை உருவாக்குவது பற்றி சில நாட்களின் முன்னர் ஒரு பதிவில் பார்த்தோம். இப்பதிவில் 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;
}

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

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

படிவங்கள் என்று வருகின்ற போது வேர்ட்பிரஸில் இருக்கும் சிறந்த ஒரு இலவச நீட்சி 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;
}

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

வேர்ட்பிரஸ் தமிழ் மொழியில்

வேர்ட்பிரஸ் ஆனது இலவசமான திறமூல நிரலையுடைய, இணையத்தளங்களை இலகுவாக உருவாக்கிக்கொள்ள உதவும் ஒரு மென்பொருளாகும். வலைப்பதிவு எழுதுபவர்கள் தங்களது சொந்த தளத்தில் வலைப்பதிவை வைத்திருக்க விரும்பின் அதற்கான சிறப்பான மென்பொருள் இது மட்டும்தான். (ஊரோடி வலைப்பதிவும் வேர்ட்பிரஸினையே பயன்படுத்துகின்றது.)

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

ஏறத்தாள ஒரு வருடமாகிய நிலையில் இப்போது வேர்ட்பிரஸின் 3.3 தமிழப்பதிப்போடு சேர்ந்து வெளிவந்துள்ளது. நீங்களும் தமிழ்ப்பதிப்பை தரவிறக்கி நிறுவிக்கொள்ள http://ta-lk.wordpress.org க்கு வாருங்கள்.

நீங்களும் உங்கள் ஓய்வு நேரத்தில் மொழிமாற்றத்தில் பங்களிக்க விரும்பின் இங்கே வாருங்கள்.